How To Decrease The 'Right' Padding For Shopping Cart Icon On Mobile

Technical Q&A
1

Good Evening To You,

We just have a small requirement to ask the community, with regards to minimising the padding on mobile, so that the ‘Shopping Cart’ shows is completely visible.

At present, on Android phones, (or maybe some iPhones), there seems to be a little overlap on the top bar, and customers have to scroll back to completely see the Shopping Cart.

The website URL is www.glassimages.co.uk.

We hope you are able to help us with this.

Many Thanks In Advance.

Kindest Regards,

Michelle

2

Good Afternoon!

This appears to be because of the Reviews iframe that you have at the bottom of your website.

The width of this iframe is set to 380px, but most mobile devices are smaller than this. For example, the Galaxy S5 screen width is 360px.

2021-08-19 15_17_46-Glass & Metal Prints _ Prints On Glass and Metal – Glass Images - Brave.png

This iframe being hardcoded to larger than the actual available real-estate is forcing the page to be scrollable on the x axis.

I would recommend finding a sweet spot for the width of this iframe, or even setting the width to be dynamically sized at 100% with a max-width of 380px.

You may have to play with the sizing to get it to display correctly.

Hope this helps!

-Justin

3

@brandpanelmedia , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (max-width: 381px){
iframe[src*='widget.reviews.io']{
min-width: unset !important;
max-width: 100%;
width: 100%;
}
}

Please let me know whether it works.

Kind regards,
Diego

4

Hi Justin,

Thank you so much for your helpful suggestion. Looking at it now, it does make sense. We hadn’t thought to look at this during our initial assessment. (Oh dear!)

Never mind, you’ve been a great help in identifying this for us. We’ll have a look now and make these amendments to the code.

We’ll let you know how we get on.

Many Thanks Again,

Michelle

1 Like
5

@brandpanelmedia

Hi Michelle, the code that I shared above wasn’t of much help? It should solve the issue. Let me know how it goes.

Kind regards,
Diego

6

Hi Diego,

Thank you so much for your helpful suggestion with the code snippet. This is most helpful to us. We hadn’t thought to look at this during our initial assessment. (Oh dear!)

You’ve been a great help in identifying this for us. We’ll have a look now and make these amendments to the code.

We’ll let you know how we get on.

Many Thanks Again,

Michelle