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

[MilesRankin]

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!

[Kinjaldavra · 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;
}
}
 

[MilesRankin]

@Kinjaldavra 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.231

Are you able to help?

[Kinjaldavra]

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

[MilesRankin]

@Kinjaldavra 

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.

[Hardik29418]

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.

[MilesRankin]

thanks @Hardik29418 

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

[Hardik29418]

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.

[MilesRankin]

@Hardik29418 @Kinjaldavra 

In the 'Assets' folder, i only have a 'theme.scss.liquid' file

Please help!

[Hardik29418]

Yes at the end of theme.scss.liquid

[Hardik29418]

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