How do I only show 3 products in a row on the portland theme

Store Design
1

Is there a certain line of code to edit so I can display 3 products in a row? Right now 2 are displaying in a row, then a single one below that, then 2, then 1, and so on and so forth. I want it to just be 3 in a row.

2

@trendytrioshop - can you please share this page link?

3

Hi @trendytrioshop ,

Please send your site and if your site is password protected, please send me the password. I will check it.

4

https://www.fixinlivin.com/collections/frontpage

On my homepage on desktop it shows 3 in a row, but on mobile it shows 2 and 1 underneath it. I also want to be able to fix that too.

5

On my homepage on desktop it shows 3 in a row, but on mobile it shows 2 and 1 underneath it. I also want to be able to fix that too.

https://www.fixinlivin.com/collections/frontpage

6

I fixed this issue. I just deleted the application and the product I was using it for. I still have a question tho: On my homepage on desktop it shows 3 in a row, but on mobile it shows 2 and 1 underneath it. How do I fix that?

7

Hi @trendytrioshop ,

Please go to Actions > Edit code > Assets > styles.scss.liquid file and paste this at the bottom of the file:

@media only screen and (max-width: 798px) {
  .product-list .column.alpha, .product-list .columns.alpha {
    margin-left: 0 !important;
  }
  .product-list div.thumbnail.even {
    clear: none !important;
  }
  .product-list .one-third.column {
    width: 90px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
  }
}

Hope it helps!

8

Will that fix the mobile issue?

9

Hi @trendytrioshop ,

Yes, it will help you to display 3 products on the same row.

10

that worked! Thank you so much!

1 Like