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

Solved
jaba23
Tourist
15 0 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!

0 Likes
Pallavi
Shopify Expert
1674 245 290

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Anonymous
Not applicable
1761 0 0

let me see see

0 Likes
jaba23
Tourist
15 0 1

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

 

Thanks for the help.

0 Likes
LitExtension
Shopify Partner
879 99 158

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.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
jaba23
Tourist
15 0 1

Awesome. Thank you very much.

0 Likes
jaba23
Tourist
15 0 1

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 × 10801920 × 1080iPhone 11iPhone 11

0 Likes
LitExtension
Shopify Partner
879 99 158

This is an accepted solution.

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.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
jaba23
Tourist
15 0 1

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?

0 Likes
jaba23
Tourist
15 0 1

@LitExtension ,

I manage to solve it. Thanks!

0 Likes