Grid not displaying as intended on widest screen

Hi there…
I’m working on a site using mostly grids for layout. In general, the grid contains all elements in a section.

It’s working mostly fine except when I get to the wides screen breakpoint (I’m previewing in Chrome) it doesn’t display as laid out (other styles, eg font size etc. seem to work fine.)

Another issue is that I added a wide margin to the sections, to move them to the right (using a vertical nav on the left.) Since I couldn’t use the container element, I made my own creating a class for sections with max width and left/right margins. This also works fine in smaller screens just not picking it up for the widest.

Here’s the read-only link.

Would greatly appreciate feedback. If I find out what it is, I’ll re-post here below…

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Diogo,

I noticed you have set an eight column grid for higher breakpoints but a 12 column grid on the widest breakpoint, that’s why images are being displayed much smaller. Try change that difference and let me know if it works for you.

Could you provide a screenshot for your margin problem? I’m not quite sure what you mean.

1 Like

Hi Chris,

Thank you so much. That fixed both issues. I guess the added columns were ‘pushing’ the grid to be wider, and crunching the other margin to the left of the grid.

Thank you so much, truly appreciated!