Issue with Collection Visibility Layout - Minimal Theme

[Lucki92]

Hi All,

I need help with visibility of collections in the page.

My page is showing only 1 collection per row and I want it to be like a grid.

Screenshot

[GabrielS]

Hello,

Can you share your website link? To further clarify, you want that on mobile phones to have a 2 column layout?

[Lucki92]

Hi

Please find link here www.pepyr.com

Password - osiath

[GabrielS]

Hello,

The below CSS code would make your collection page grid to have 2 columns:

@media (max-width:768px) {
li.item.product {
  width: 50% !important;
  float: left;
}
}

Adding the above code at the end of your 'styles.scss.css' file should be working as expected.

Let me know if everything works as expected.

Cheers!

Gabriel

[Lucki92]

Hi Gabriel,

Sorry for missing the point. It is required at this page :

https://www.pepyr.com/pages/clothing

It is a custom page created using a code from youtube video.

[GabrielS]

Here you go:

@media (max-width:768px) {
.grid__item.grid-item.product-grid-item.large--one-quarter {
  max-width: 48%;
  float: left;
  margin: 1%;
}
.grid__item.grid-item.product-grid-item.large--one-quarter img {
  max-width: 100%;
}
}

Regards,

Gabriel

[Lucki92]

Tired adding in

styles.scss.liquid

style.css

styles-home.scss,liquid

It doesn't make any changes. I don't see styles.scss.css in my theme code.

[GabrielS]

Adding the code in any of the below files should be working as expected:

styles.scss.liquid

style.css

styles.scss.css (make use of the search bar to find this page)

I had a quick look and the code doesn't seems to be added - have you saved the file?

Alternatively, can you provide admin access? If yes, you can DM me and I'd be able to log in and apply the code.

[Lucki92]

Hi Gabriel,

Its working on mobile and I can see 2 products/collection in 1 row but on web it still shows 1 collection per row.

[GabrielS · Accepted solution]

Oh, I initially thought that you want to apply it only for mobile phones.

Applying the code as below, without the media query would achieve a 2 column layout for desktop too.

.grid__item.grid-item.product-grid-item.large--one-quarter {
  max-width: 48%;
  float: left;
  margin: 1%;
}
.grid__item.grid-item.product-grid-item.large--one-quarter img {
  max-width: 100%;
}

The page seems to be a little buggy (for example, part of the first image is behind the navigation bar). You might consider hiring a developer to make further adjustments.

Regards,

Gabriel

[Lucki92]

HI Gabriel,

Thanks for your help. It worked perfectly.

Can you share a screenshot of the bug you mentioned. The Theme looks same to me as it was in live preview.

If there are bugs, then would definitely love to get them removed by professionals.