Streaming live at 10am (PST)

My Grid Isn't Responsive In Google Chrome

Read-only link

Hi everyone,
I got a problem that I can’t seem to figure out; I am making a website for my agency and I have included a section where I want to explain three different things with an image, a heading, a paragraph and A ‘read more’ link. As shown below:

I have done this by creating a grid within the div block (with the box-shadow). The grid consists of 3 columns of each 1fr with a column gap of 30px. The structure of the section with this grid is as follows:

When I go ahead and test the responsiveness of this grid, it all works well on Firefox. Every element becomes narrower to fit the grid columns. When I test it in Google Chrome, on the other hand, none of the elements inside the grid scale accordingly, and the grid just overflows outside the div, like this:

I have absolutely no idea what could cause this problem. I have been trying things on and off for three days but nothing seems to work.

Help will be hugely appreciated!

Thanks in advance,

When you work with grids, it’s up yo you to design/adopt the grid for each breakpoint

I get what you mean, but why does the grid work just fine on Firefox?

Hi i mostly use flexbox, but I have absolutely no problem with Firefox

I have no issues with Firefox either, it doesn’t work in Google Chrome as I stated!

Hi Daniel.
Your site works as expected in my Google Chrome browser - Although a preview link but seemed fine.

That’s weird… Maybe it has something to do with my cache

Did you also try rescaling the window? Because it works on full width. It acts weird at a width of about 1770px. That is when the content overflows outside the shadow box.

Yes I just did a complete test across the whole set of resolutions. The only time it doesn’t fit is in mobile but that looks like you haven’t resized everything yet.


Treat me to a coffee

Ok thanks for your time! I will try testing it on my other pc then!