Mobile layout slider elements too big in Empire theme

Store Design
1

I am currently finalizing the mobile view for your great theme! I’m struggeling adapting the flickty grid to show more than two really large products in the slider (image attached). Is there a away to decrease the size of the elements in the feautred collection so that it can hold more products and i can control the product card size. Would really appreciate the support!

3

Hi @solama

This should be easy enough. You just have to reduce the width of the individual cards using CSS.

Go to Online Store > Themes > Customize, open the Theme settings and paste this into you Custom CSS field:

@media only screen and (max-width: 768px) {
  .product-grid--mobile-slider .grid__item {
    width: 40% !important; 
  }
}

If you want to tweak it a bit, just change the percentage in the code!

Hope this helps!

4

@mercytech thank you so much! It worked Perfectly. It was the aspect ratio set to Natural that was blocking the script. applied the code with a minor change on .productgrid–item.
Thanks!
Sherif

5

@PieLab Resolved. Thank you so much! aspect was set to Natural, when changed and applied code it worked out!

Thanks,
Sherif