Product recommendation CSS issue on Mobile view. DAWN THEME

why is the product recommendation component is overlapping each other in the mobile view?

URL: 1.09 Carat Alexandrite – ABBASI (abbasigems.com)

password:testingpage

Thank you so much!

Hi @justauser

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag


Hope this answer helps.

Best regards,

Victor | PageFly

1 Like

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->
Step 2: Search the file base.css
Step 3: Paste the below CSS at bottom of the file → Save

@media only screen and (max-width: 767px)
{
product-recommendations .product-grid .grid__item {
max-height: 350px !important;
margin-bottom: 120px !important;
}
}

Output:

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

1 Like