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

Store Design
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!

2

@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;
}
}
1 Like
3

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

2
2828×1792 150 KB

3
3828×1792 152 KB

1
1828×1792 212 KB

Are you able to help?

4

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

1 Like
5

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

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

7

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.

1 Like
8

thanks @Hardik29418

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

9

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.

10

Screenshot 2021-04-21 at 10.48.10.png
Screenshot 2021-04-21 at 10.48.10.png4630×2494 944 KB

@Hardik29418 @Kinjaldavra

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

Please help!

1 Like
11

Yes at the end of theme.scss.liquid

1 Like