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,
Daniël
