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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024