Solved

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

jaba23
Excursionist
18 0 3

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!

Accepted Solution (1)
LitExtension
Shopify Partner
4860 1001 1133

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
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 9 (9)

ZestardTech
Shopify Expert
5393 970 1291

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
jaba23
Excursionist
18 0 3

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.

Not applicable

let me see see

LitExtension
Shopify Partner
4860 1001 1133

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
Check out our Shopify migration app to migrate your online store to Shopify
jaba23
Excursionist
18 0 3

Awesome. Thank you very much.

jaba23
Excursionist
18 0 3

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

LitExtension
Shopify Partner
4860 1001 1133

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
Check out our Shopify migration app to migrate your online store to Shopify
jaba23
Excursionist
18 0 3

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?

jaba23
Excursionist
18 0 3

@LitExtension ,

I manage to solve it. Thanks!