I use css grid to position two divs (one containing text and the other - illustration) side-by-side. It works well on a full-screen laptop, but whenever I shrink the window size, the text will change responsively and the image won’t. So I tried to write a query @media only screen and (max-width: 600px) { grid-template-columns: auto; width: 100%; } } I thought it would transform the two divs from side-by-side position to stacked on top another. But that doesn’t change anything.
Any help would be appreciated.
Thanks in advance
Doesn’t seem to me like the text is changing its size with the window resize. Giving the image width of 100% will make it so that it shrinks with its parent.
Ah, you typed text-size. Try font-size instead since, as the inspector shows when you inspect your text element, text-size is an unknown property name.
I played around with it some and got it to work, but I didn’t use grid. My first instinct was to use flexbox. I got rid of the grid and set the container to flex instead. Then I got rid of the media query and made one instead that changes the flex direction to column. The image responsiveness depends on you selecting the img when you set your max-width and height. You are selecting the div wrapper, not the img. That’s why the image isn’t being responsive.
I hope to resolve it.