How do i get my store to show collections with 2 products per row?

Solved
MilesRankin
Tourist
5 0 1

Hi guys,

 

My store - bootboy.shop - currently only displays one product at a time in the scrolling mobile view.

 

What do i need to do in order to display 2 products per row on mobile view?

 

This is the collection page I am reffering to: https://bootboy.shop/collections/all-products

 

Currently using the 'Brooklyn' theme.

 

Many thanks!

0 Likes
Natztech
Shopify Partner
615 163 410

This is an accepted solution.

@MilesRankin  
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 429px){
.template-collection .grid-uniform .grid__item{
    width: 50% !important;
}
}
 

  

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
MilesRankin
Tourist
5 0 1

@Natztech Thanks very much!

 

This has partially worked, but there have been some bugs introduced:

 

1. The Bootboy logo on the main homepage has become much smaller

2. The products images in the collection are not square

3. There are some gaps on a few of the rows.

Please see attached images.223311

Are you able to help?

0 Likes
freya0328
Excursionist
73 0 8

Have you solved this problem?

0 Likes
Natztech
Shopify Partner
615 163 410

do you want to look like this see screenshot http://prnt.sc/11sohrr

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
HardikDavra
Shopify Partner
1849 293 809

@freya0328 Please place this code at the end of theme.scss

@media screen and (max-width: 768px) {
.site-header__logo img {
    max-height: 123px;
}
}
#CollectionSection .grid-uniform {
    display: flex;
    flex-wrap: wrap;
}
@media screen and (max-width: 590px) {
.product--wrapper {
    margin: 0px auto;
}
.grid-product__image-link .product--wrapper .product--image {
    width: 100%;
    position: absolute;
    top: 0;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: contain;
    left: 0;
    bottom: 0;
    right: 0;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
MilesRankin
Tourist
5 0 1

 

@Natztech 

Yeah that looks great!

 

Would you be able to make sure the bootboy logo on the homepage doens't get smaller too? - As it has shrunk with th new code.

0 Likes
HardikDavra
Shopify Partner
1849 293 809

You need to crop the logo from top and bottom because it is taking up the space.
Please upload the logo again after cropping it.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
MilesRankin
Tourist
5 0 1

thanks @HardikDavra 

 

This is sorted now! - just need to get the collections rows to appear square

0 Likes
HardikDavra
Shopify Partner
1849 293 809

It seems that you have placed the code at wrong place.
Please go to Assets -> theme.scss -> paste the code at the bottom of this file and then check.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes