DIVs Won't Collapse for Small Screen View

[ds_tx]

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) -
http://dstall.com/SampleCSS.txt
http://dstall.com/SampleHTML.txt
 

[dsonesuk]

You need to specify flex-wrap: wrap; or columns will remain in a single row and amend widths to fit full-width;

[ds_tx]

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.

[ds_tx]

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 -
http://dstall.com/Test2/
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_architect&stacked=h
https://www.w3schools.com/w3css/tryw3css_templates_architect.htm
https://www.w3schools.com/w3css/4/w3.css

[dsonesuk]

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.

[ds_tx]

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 August 5, 2022 by ds_tx

[ds_tx]

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 August 5, 2022 by ds_tx

[dsonesuk]

With image look into

https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit_all

To centre, use flex with align-items and justify-content.