How to set an image max-width for a certain screen size?

Store Design
1

Hello,

I created a page with an image. I want the image to be at full resolution regarding the screen size. But when a screen is too big (i.e.: 21") the image is huge.

My rich text image parameters are as following:

.rte img {
     width: 100%;
     height: auto;
}

How do I set a max-width for different screen sizes or resolutions?

Thanks!

2

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

3

let me see see

4

Hi,

Here’s the link to my site: https://www.normalem.com/pages/t-shirt-size-chart-care

And here is the screenshot of the image I’m referring to.

Screen Shot 2021-04-15 at 8.55.30 AM.png
Screen Shot 2021-04-15 at 8.55.30 AM.png1920×1043 178 KB

Thanks for the help.

5

Hi @jaba23 ,

In this case, you just please place this code at the end of the “index.css” file.

.rte img {

width: 100%;

height: auto;

max-width: 50%;

}

Screenshot to refer: https://prnt.sc/11gkngm. Hope to this helps.

6

Awesome. Thank you very much.

7

Hi @LitExtension ,

I thought your suggestion was going to solve my problem but it didn’t. The thing is that now all the screen sizes have a 50% width (example below).

I need it 100% for Mobile (w.e.: iPhone 11) and I need it 50% for Desktop (i.e.: 1920 × 1080).

1920 × 1080
1920 × 10801913×1043 90 KB

iPhone 11
iPhone 11828×1392 59.6 KB

8

Hi @jaba23 ,

You can remove old our snippet with this snippet:

.template-page .rte img {

width: 100%;

height: auto;

}

@media (min-width: 768px) {

.template-page .rte img {

width: 100%;

height: auto;

}

}

Hope this helps.

9

Thanks @LitExtension ,

But where should I edit this? On index.css?

Or do I have to write this piece of code within the page.liquid?

10

@LitExtension ,

I manage to solve it. Thanks!