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

Solved

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

divinelyguided
Shopify Partner
14 0 4

Hi loves!

 

I need help with aligning some images on mobile.

The desktop is centered but not mobile.

 

Here is a screenshot attached.

Screenshot 2024-10-15 at 11.52.24 AM.png

 

Thank you so much!

Website link is: https://sorella-company.myshopify.com/

Password: Sorella2024

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
8739 2090 2563

This is an 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:
    Made4uoRibe_0-1729012512160.png

     

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
8739 2090 2563

This is an 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:
    Made4uoRibe_0-1729012512160.png

     

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
divinelyguided
Shopify Partner
14 0 4

This worked perfectly for the designs!

How can we do this one & that should be everything. 

 

Screenshot 2024-10-15 at 6.48.59 PM.png

 

How did you come up with the section#customcode...etc?

 

Thank you soooo much!!! xoxo

divinelyguided
Shopify Partner
14 0 4

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

Made4uo-Ribe
Shopify Partner
8739 2090 2563

You already fix it right? 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PaulNewton
Shopify Partner
7450 656 1560

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