Two rows of products on mobile home page - Brooklyn Theme

[StoreHelpNeeded]

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!

[Small_Task_Help]

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;
  }
}

[StoreHelpNeeded]

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.

[PageFly-Richard · Accepted solution]

Hi @StoreHelpNeeded 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
@media(max-width: 767px) {
.index-sections #CollectionSection .grid-uniform{

    display: flex;
    flex-wrap: wrap;
}
.index-sections #CollectionSection .grid__item {
width: 50%;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly