A Shopify store owner reported two layout issues: related products section misaligned to the left instead of centered, and mobile product pages displaying all images at once rather than in a carousel format.
Root Cause:
A CSS conflict was affecting the grid layout. Specific CSS code was overriding the original display properties for the .grid class.
Solution Process:
base.css!important to display: flex at line 884 of the .grid class!importantStatus: Issue resolved successfully. The related products section now displays properly centered on the page.
Hi everyone, so we had trouble regarding the “related products” section, it’s now aligned to the left where it supposed to be in the middle of the page. Also the preview for producy page on the mobile version showing all images instead of carousel.
Here’s the preview of our unlaunch website: https://y83psuuncubrjxkf-48511254689.shopifypreview.com
Please help, thank you!
Hi CharStaff,
This CSS is affecting the original layout. If you check removing that, it will work properly. If you’re using that CSS somewhere then have added a parent class for the same
Feel free to reach out if you have any questions
Hi, where can we find that css, it is on base.css?
Hii,
In base.css, you can find .grid class and add !important to display: flex CSS, Like display: flex !important
The ; is missed at the end. After !important
