How to fix horizontal overflow in prestige theme on mobile?

fcelia_gomez
Tourist
14 0 2

I contacted the company who designed the website, but no one has gotten back to me which is annoying. 
I'm having issues with the layout on my mobile device with the pages overflowing and I have looked through the community and tried all the codes and nothing has worked. I did come across one where the man had to delete his cache but I'm not sure how to fix this. 

It would be helpful if someone can respond, I have tried the below codes. 

body {
overflow-x: hidden !important;
}

 

.sc-ezbkAF.A-dmbO.pf-5d5079cf8da1-2_.pf-r.pf-r-eh {
max-width: 100%;
}

 

#shopify-section-template--16964740251812__00a67bbd-2d59-4c57-9430-5af197c3c24c {
overflow: hidden;
}

 

The issue seems to only be on my mobile device, the desktop works fine, but the overflow seems to be on all pages, more worse on the main page. Considering I paid over $500 AUD for this theme I'm quite annoyed -_- but I'm hoping it can be an issue that can be fixed. 

Screenshot_20230513_190005_Samsung Internet.jpgScreenshot_20230514_164929_Samsung Internet.jpg

Replies 8 (8)

NomtechSolution
Astronaut
1245 113 149

If you are experiencing layout issues with your mobile device where the pages are overflowing, it's possible that there are conflicting styles or other factors causing the problem. Here are a few suggestions to help troubleshoot and fix the issue:

  1. Clear Browser Cache: As you mentioned, clearing your browser cache can sometimes resolve layout issues caused by cached styles or resources. To clear the cache on your mobile device, go to the settings of your browser app and look for options like "Clear browsing data" or "Clear cache."

  2. Responsive Design: Ensure that your website has a responsive design that adapts to different screen sizes. Check if there are any media queries or responsive CSS rules that may be affecting the layout on mobile devices. It's important to test your website on various mobile devices and screen sizes to ensure it works well across different platforms.

  3. Mobile-specific CSS: If the layout issues persist, you can try adding specific CSS rules targeting mobile devices. Media queries can be used to apply different styles based on the screen size. For example:

 

/* CSS for mobile devices */
@media (max-width: 767px) {
  /* Add your mobile-specific CSS here */
}

 

shreyhweb
Shopify Partner
631 109 114

@fcelia_gomez 

 

Please share the store URL then we will able to help you.

 

Thankyou

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
fcelia_gomez
Tourist
14 0 2
www.wildwitcheryapothecary.com.au

$Updateyourpassword01
shreyhweb
Shopify Partner
631 109 114

which page have the issue?

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
fcelia_gomez
Tourist
14 0 2

I can see the problem on the front page. I have a feeling it's my instagram widget but I don't know how to fix it.  

shreyhweb
Shopify Partner
631 109 114

@fcelia_gomez 

 

we will help you please let us know the page URL where to create this issue?

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
fcelia_gomez
Tourist
14 0 2
I have posted this already.

www.wildwitcheryapothecary.com.au
$Updateyourpassword01
shreyhweb
Shopify Partner
631 109 114

@fcelia_gomez 

 

please give us page URL also where the issue?

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com