Need help centering CSS/HTML images on mobile {they fit perfectly on desktop}

[divinelyguided]

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

[Made4uo-Ribe · Accepted solution]

Hi @divinelyguided 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@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%;
}
}

• And Save.
• Result:
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[divinelyguided]

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

[divinelyguided]

I think I figured it out looking through the "inspect".

[Made4uo-Ribe]

You already fix it right? 

[PaulNewton]

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.