I am on a laptop and the page looks full width. I can’t seem to see any containers at a quick look, but when I zoom out I can see they have a fixed width.
Can anyone tell me what is going on here? Is it a fluid layout that does actually have a width on the containers? Or are there breakpoints making it fixed width when on very large screens?
It’s basically 100% width parent elements that need to stretch to viewports edge but inner content elements have a max-width of 1600px and margin:auto to centre them.
(There may also be media queries reducing the max-width as the screen gets smaller so they don’t touch the edge but I didn’t check that far.)
So if I were to create something similar I would set mobile to full width, and then desktop or large screens to full width with a inner container with a max-width of 1600px so when it’s on extra large screens it would be 1600px max?
You wouldn’t really need to change the containers for mobile as you would be targeting the horizontally aligned inner elements instead on mobile so that you stack them vertically. The max-width only comes into play when there is enough width. If you view that page on mobile you can see its all vertical with the inner elements width controlled as required.
