It’s easy enough to set the above, but what I can’t make happen is ensuring that when the viewport is 1920 and above the width of all elements are actually 1920…instead they are all over the place from page to page, from 1560 to 1440 and more. The 1920 width is only achieved on pages that also have horizontal flex images. How do I force the width of elements to be 1920 at 190 or above but still be responsive when the viewport is 1919 or less? (I have tried every flex box combo I thought would work).
I’m seeing the site limited and centered to 1920 in the read-only link, although are you talking about the content underneath the full-width sections (where the copy is)?
If so, you’ll need to update your 1440 container classes to use a max-width of 1920 instead:
On the Home, Services, and Products We Love pages, the section widths are 1920. There are some divs within those pages that restrict content areas to 1440.
Then, on the Inspiration page (and others) the section widths are less than 1920, and some have the content divs restricted to 1440 or less as well.
I tried to set all sections and divs to stretch, but that didn’t seem to solve it. I’m sure I’'m missing something!
Ah okay, now I see, it looks like those pages don’t have any content (like imagery) that “forces” the content to fit the entirety of the 1920 width. Since you’re using max-width and the “Shrink if needed” flex sizing property, these pages will only get as wide as they need to be.
If you updating the flex sizing to “Grow if possible”, the content will stretch to the full width of the available space:
