I need some help about using media queries in my Product Landing Page project

Here’s my code so far:

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.

1 Like

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.

1 Like

Thank you for the tips :smiling_face_with_three_hearts:

Thank you, I also use flex now and it works fine, but now I’m left with the horizontal scrollbar :smiley: I hope to resolve it.
Thanks again :heart:

1 Like