Shop page on mobile has no margin

Hi there,

On my site’s shop page (equihire.co.uk/shop) the margin to the left is missing and the text overlaps and goes off the edge of the device. On all other category and product pages it’s fine. Please could you help?

Many thanks

Hello there,

I inspected your shop page and found the below custom CSS code pollutes the default content width.

@media screen and (min-width: 48em) {
  .container {
    width: 100%;
  }
}

What will happen if you remove it temporarily? What’s the purpose of that code? Probably I could suggest you with the better one?

Regards,
Kharis

Ah thank you. I’m not sure why that’s there tbh, if it’s removed and there are no obvious changes I’m
Happy to add in a new code?

Thanks

Hello there,

Try replacing it with:

    @media screen and (min-width: 800px) {
      .container {
        width: 100%;
      }
    }

Let me know how it goes.

Regards,
Kharis

Hi there,

It seems to be fine for 2 seconds and then jumps back to the overlap position?

Thanks

It doesn’t seem to change anything, as this custom CSS code exists.

.container {
    width: 100%;
}

Do you have a reason to share why it should be there?

Regards,
Kharis

Hi there,

I’ve removed that now yet is still doesn’t seem to be fixed.

Thanks

Hello there,

Please try adding this extra CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      .blog #secondary, 
      .single #secondary, 
      .default #secondary, 
      .page #secondary, 
      .woocommerce #secondary,
      .blog #primary, 
      .single #primary, 
      .default #primary, 
      .page #primary, 
      .woocommerce #primary {
        float: none;
      }
      #pgc-5-0-0 {
        padding-right: 0 !important;
      }
      #n2-ss-51-align {
        width: calc(100% + 62px) !important;
        width: -moz-calc(100% + 62px) !important;
      }
    } 

Regards,
Kharis

Hi so this has fixed the original problem however now all of the category pages are no longer full width on desktop. And the image banner at the top isn’t full width on them either. Thanks

Have you put this code back?

    @media screen and (min-width: 800px) {
      .container {
        width: 100%;
      }
    }

Regards,
Kharis

Hi no I haven’t- would you like me to?

Thanks

Yes, please try it. I am wondering if it could resolve the issue.

Regards,
Kharis

Hi it did thanks all solved.

Great! Glad to hear you’ve resolved it yourself.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis