Two rows of products on mobile home page - Brooklyn Theme

Solved

Two rows of products on mobile home page - Brooklyn Theme

StoreHelpNeeded
Excursionist
50 0 10

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!

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4399 1006 1657

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

PageFlyRichard_1-1718758627460.png

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

Small_Task_Help
Shopify Partner
528 16 36

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;
  }
}
Click here to Contact and Get Shopify Store Help
E-mail - hi@ecommercesmalltask.com
We are Shopify Experts   from Ecommerce Small Task Company.
StoreHelpNeeded
Excursionist
50 0 10

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
Shopify Partner
4399 1006 1657

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

PageFlyRichard_1-1718758627460.png

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.