All things Shopify and commerce
Hi loves!
I need help with aligning some images on mobile.
The desktop is centered but not mobile.
Here is a screenshot attached.
Thank you so much!
Website link is: https://sorella-company.myshopify.com/
Password: Sorella2024
Solved! Go to the solution
This is an accepted solution.
Try this one.
@media only screen and (max-width: 600px){
section#CustomCode--template--20982533194031__a21c5125-d980-4e3b-bb8d-edddd038b5c4 img,
section#CustomCode--template--20982533194031__2cd5220a-a0dc-4df1-a5ab-978dda1ae603 img {
width: 100%;
}
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
This is an accepted solution.
Try this one.
@media only screen and (max-width: 600px){
section#CustomCode--template--20982533194031__a21c5125-d980-4e3b-bb8d-edddd038b5c4 img,
section#CustomCode--template--20982533194031__2cd5220a-a0dc-4df1-a5ab-978dda1ae603 img {
width: 100%;
}
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
This worked perfectly for the designs!
How can we do this one & that should be everything.
How did you come up with the section#customcode...etc?
Thank you soooo much!!! xoxo
I think I figured it out looking through the "inspect".
You already fix it right?
Hi @divinelyguided 👋 Part of this comes form having a large explicit width on the img element itself.
So you may want to use two image elements 1 for desktop and 1 for moble , as that will also let you use a different smaller image if you want to better control the entire proportions on mobile and improve performance if the initial image has a large file size.
In your custom-code section try the below code adding your existing img src file name attribute
<center>
<img class="desktop-only" width="500" height="auto" .... >
<img class="mobile-only" width="320" height="auto" .... >
</center>
<style>
@media only screen and (min-width: 768px){
.desktop-only { display: block; }
.mobile-only { display: none; }
}
@media only screen and (max-width: 767px){
.mobile-only { display: block; }
.desktop-only { display: none; }
}
</style>
,or replacing values of the width attribute/css-properties to need.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024