Jump to content

DIVs Won't Collapse for Small Screen View


Recommended Posts

I have a responsive design working for a MediaWiki Main Page at - https://dstall.com/MOD/
All DIVs resize smaller or larger with browser width, but I want them to collapse into full width single column for smaller screen notepads and mobile phones.

In containers (.box) there is a full width header at top (.welcome) and full width footer at bottom (.left6).
Beneath header is container (.box) with a main DIV (.left1) and right sidebar (.right2).
Beneath that (and above footer) is another container (.box) with three DIVs (.left3, .center4, .right5).

The right sidebar (.right2) does not collapse below the main DIV (.left1).
The three DIVs (.left3, .center4, .right5) do not collapse beneath one another.

I would also like the three images in the main DIV (.left1) to collapse beneath one another and center in screen with a percent of screen rather than full screen.

See CSS and HTML (summary without content) -

Link to comment
Share on other sites

I've revised SampleHTML so it has full header.
See - http://dstall.com/SampleHTML.txt
And I've uploaded it here - http://dstall.com/Test/
Everything displays as I want, and is resizeable but does not collapse into column.

I've added flex-wrap to my container CSS - .box { display: flex; flex-wrap: wrap; width: 100%; padding: 0; } 

I've changed width of Main Div (.left1) from 75% to flex: 3 1 0
and width of right sidebar (.right2) from 25% to flex: 1 1 0 

I've also changed width of pix from 33% (.three) to 100% (.one),
and width of three DIVs in a row (.left3, .center4, .right5) from 33% to 100%.

See - http://dstall.com/Test2/

Right sidebar (.right2) still will not collapse below Main DIV (.left1).

In Main DIV at full browser width on desktop, all three pix DIVs stack on top of one another in a column instead of displaying in a row, and stretch full width of browser.
I want them to center, with a maximum size.

Also, all three DIVs in a row (.left3, .center4, .right5) above footer stack on top of one another in a column.

When I add .row (flex-direction: row) to container for pix and three DIVs they still stack instead of displaying in a row.

When I delete width from container so it's - .box { display: flex; flex-wrap: wrap; }, then the Main DIV and right sidebar collapse all the way to the right.

Link to comment
Share on other sites

At bottom of page, I've tried recreating the four div pix section from W3 template (Architect) and that doesn't work either.
Only displays 2 pix inline instead of 4, and won't collapse to column, only resizes.
See -

Link to comment
Share on other sites

There's no thing as 3 as used here (unless its new?), flex: 3 1 0;   it either 1 or 0 (on and off) for shrinking and stretching and I don't know why you would use 0 at end?


.left1 {
  flex: 1 1 auto;
  background: #f5fffa;
  margin-right: 5px;
  border: 1px solid #cef2e0;
  font-size: 1em;
  line-height: 165%;

@media screen and (max-width: 700px) {
  .left1, .right2, .left3, .center4, .right5 {   
    flex-direction: column;
.col.left1 {
    flex: 1 1 100%;

All media queries should follow default css, which is not within a media query, this is how CSS  (Cascade, Style, Sheet) works, from top to bottom, anything using a  selector previously will be overridden by the latter same selector css code.

try above.

Link to comment
Share on other sites

I made it work, but the right sidebar (right2 DIV) collapses below left1 DIV much sooner than the 3 DIVs above footer collapse beneath each other, and sooner than 3 images in left1 DIV collapse beneath each other .
See - http://dstall.com/Test/ and https://dstall.com/MOD/Main_Page

I prefer all collpsible DIVs collapse at same time - right2, pix, left3, center4, right5.
When right2 DIV collapses so soon, then it's so wide that images in it are huge compared to other 3 images in left1 (Main DIV).

Is there a way to assign max size to image and center it, so that it remains responsive as needed, but does not fill width of screen when collapsed while screen is still so wide - perhaps 300px, no bigger than needed to fill smallest screen (320px)?

I want left Main DIV to be 75%, right sidebar 25%.
So instead of flex: 1 1 auto for left1 and right2, I'm using flex: 1 1 74.75%, and flex: 1 1 24.75%
(75% and 25& broke width and pushed right2 DIV below left1).

Is there a better way to achieve that proportion so that more narrow right2 DIV does not collapse so soon?

To make all DIVs collapse, I also had to add all other DIVs to @meda screen CSS (not just left1)  -

@media screen and (max-width: 700px) {
  .pix, .left1, .right2, .left3, .center4, .right5 {   
    flex-direction: column;
.pix, .col.left1, .col.right2, .col.left3, .col.center4, .col.right5 {
    flex: 1 1 100%;

Also added to all DIVs I want to be collapsible (pix, left1, right2, left3, center4 and right 5) - 

flex: 1 1 0;


Edited by ds_tx
Link to comment
Share on other sites

Changed flex: 1 1 74.75%, and flex: 1 1 24.75% to flex: 3 1 0, and flex: 1 1 0, and it works much better.
The 3 is number of times bigger than 1 (3:1 or 75%:25%).

Now all collapsible DIVs collapse at same time.

I'd still like to know how to set max image size and center it.
I suppose using center tag would center image, but how do I set max size and still have image responsive at smaller than max size?

Edited by ds_tx
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...