Hi, my first time posting here. I have a site with a grid layout on two separate pages (Home and Our Services).
The issue, when I view the pages on full screen in the desktop breakpoint the grid appears shifted to the left of the screen. The spacing on the left is where I would like it to be but on the right, it is much bigger space (screenshot below). I have tried several things to solve this without any luck. Any tips would be much appreciated.
The direct method is giving your Section 2 grid settings of width: 100%, max width: 1440px or any value that you want it to stop it from scaling further, then margin: auto left and right so its centered on screen width bigger than 1440px.
However, the recommendation is you use a standard container class for each section’s content so your content is aligned across the site and you only need to make change to one class for any adjustments.
Yes! That is exactly what I was wanting it to do. It’s funny I tried the width 100% and auto margins but I did not add the max width to 1440px. However, when you mention adding the content in a container would I put the entire section inside the container and add the same settings to the container as you did to the grid section? The other question I have, why do the other grid sections I have seem to be ok without the max width as far as scaling goes? Thank you for your help!
The other type of content still looks balanced when you stretch them in a grid as grid will automatically balance the content across the screen width. After looking at it again, I realized you set a max width to each image, if you take out the max width and give it an auto width. They will also stretch across the screen in a grid based on the height, making it look balanced. But it depends on what type of scaling and responsiveness you have in mind across different devices and screen widths, which is where you plan your build.
On a 2560px screen width with images set to 16:9 ratio is how it will look like below (just a scaling responsiveness choice):
What I meant for the standard container class part is Section -> Container (same class) -> Content so any changes you make to the container that wraps each section content, will be consistent and changeable from the same class.
Its good to look at how others structure their content for adaptable and consistent layout. You can maybe start with looking at Finsweet Client-First structure.
