Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Mobile Layout??

Solved

How can I fix overlapping product images on mobile display?

Naveed5
Tourist
11 0 2

Hi guys,

Im experiencing this issue on mobile display where my product images and name are overlapping on each other. Is there any way to fix this.

 

Issue picture attached;Screenshot 2023-10-14 at 11.31.08.png

Accepted Solution (1)
theycallmemakka
Shopify Partner
1729 419 437

This is an accepted solution.

Hi @Naveed5 

 

I have written a CSS to fix the issue.

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media only screen and (max-width: 750px) {
  .grid--1-col .grid__item {
    max-width: 100%!important;
        width: 100%;
    }
}
<style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards

Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 5 (5)

theycallmemakka
Shopify Partner
1729 419 437

Can you save the changes and review this on actual mobile? In most of the case mobile layout doesnot look like this in real.

 

Also can you please provide link to your site. I will review it and give u a feedback.

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Naveed5
Tourist
11 0 2

Yes sure. It lookes the same asfter its saved

the link: https://urbane-madeforrealmen.myshopify.com/

theycallmemakka
Shopify Partner
1729 419 437

This is an accepted solution.

Hi @Naveed5 

 

I have written a CSS to fix the issue.

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media only screen and (max-width: 750px) {
  .grid--1-col .grid__item {
    max-width: 100%!important;
        width: 100%;
    }
}
<style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards

Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Naveed5
Tourist
11 0 2

yessir. it worked. thanks alot

Jennifer_Owens
Visitor
1 0 0

Hi Makka! I am having a similar issue, but unfortunately the solution you created did not work for me. The overlapping images on the carousel look just as they did before inserting the code. Thanks for your help!

 Screenshot 2024-12-06 at 1.33.35 PM.png