Product recommendations text mashed together on mobile

Store Design
1

Hey, i need some help. On my shopify page i have a product recommendations section in the bottom on every product page. But the text is all mashed up together. Do anyone know why this happend or how i can fix it?

Its only on mobile it does this. Example product: https://americanwine.dk/products/eden-rift-winery-estate-pinot-noir-2018

Thanks!

2

Add this to the bottom of your theme.css file.

@media (max-width: 1007px) {
.ProductRecommendations .ProductList--carousel {
  white-space: normal !important;
  display: flex !important;
}

.ProductRecommendations .ProductList--carousel > .Carousel__Cell {
  min-width: 220px !important;
  margin: 0px !important;
}
}

Hopefully that helps

1 Like
3

Hi @LauraOO

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 


Hope this can help you solve the issue

Best regards,

Victor | PageFly
1 Like
4

Hello @LauraOO ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1678862944371.png
GemPages_0-1678862944371.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1678862980965.png
GemPages_1-1678862980965.png1476×889 67.9 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

Thanks again Gempages, worked perfectly.

6

Hi @LauraOO ,

I am so glad that my solution can help.

7

@GemPages I have the same problem on collection page, with a you just watched section. Its the same element just with products they just watched. “Du har lige set” is it called.

https://americanwine.dk/collections/all

Do you have some code that can fix this aswell?

8

Hi @LauraOO You can try this code :