Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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.
Hello There,
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.
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.
Thanks for the help.
let me see see
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.
Awesome. Thank you very much.
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).
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.
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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024