Two rows of products on mobile home page - Brooklyn Theme

Store Design
, , , , ,
1

Hello there!

Could anybody please help me with my Brooklyn theme home page? I want to display 2 rows of products on mobile phones instead of one like it is on my collections page already.

Is anybody kind enough to help me with the code? Website: Shopcutify.com

Thank you!

2

Hi,

Hope following css code will help you (kindly add at end of CSS file)

/* Custom styling for two rows of products on mobile */
@media only screen and (max-width: 767px) {
  .grid__item {
    width: 50%;
    float: left;
  }
  .grid__item:nth-child(odd) {
    clear: none;
  }
  .grid__item:nth-child(even) {
    clear: both;
  }
}
3

This kinda works, however, the first and last product appear in a separate row and the text element above the product selection has also moved to the left.

4

Hi @StoreHelpNeeded

This is Richard 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

PageFlyRichard_1-1718758627460.png
PageFlyRichard_1-1718758627460.png400×867 220 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly