bootstrap product page not working on mobile view in Shopify

Retired Boards Appdev Partners Discussion
1

bootstrap product page not working on mobile view in shopify.

Works fine on the collection page on desktop and mobile.

ensured is run under the within theme.liquid but no avail.

The bootstrap is a simple tabs design and the contents of the 2nd and 3rd tab are not seen in mobile view only in product page. It works in the collection page though.

Any advice would be appreciated. Thanks!

2

Hi Mcclark,

Without seeing the full code for the product page, it’s difficult to say for sure what might be causing this issue, but there could be several reasons why the tabs are not working correctly on mobile view. Below are some steps you can take to troubleshoot the issue:

  1. Check your CSS and JavaScript: Ensure that your CSS and JavaScript are not causing the tabs to hide or become unclickable in mobile view. You may need to adjust your media queries or add specific styles for smaller screen sizes. Additionally, check if any JavaScript event listeners are not properly attached mobile view.

  2. Inspect with DevTools: Use browser developer tools to inspect the elements on the product page. Check any hidden elements, CSS issues, or JavaScript errors. Toggle the device toolbar in DevTools to simulate a mobile viewport.

  3. Review your Liquid Code: Ensure that the Liquid code is correctly rendering the Bootstrap tabs on the product page. Also, make sure that the product details are being correctly passed into the tabs.

  4. Test on Different Devices/Browsers: Sometimes, issues might be specific to certain devices or browsers. Test your store on multiple devices and browsers to see if the issue persists.

Hope this helps!

3

Thanks I will go through those actions. I appreciate your response!