Products on main page per row (mobile)

Hi, do you have a link to your site so we can check out the code there?

Hello @jarretc!

Sure thing, here You go: https://serwer1901590.home.pl/

Sorry for the delay, which mobile device did you take the screenshots on? When looking at your site on an iPad it displays the 3 products across the browser width.

When looking at the site on an iPhone 7 it only shows one product which somewhat makes sense as having 3 going across such as small browser width would look pretty busy. That being said, you could try something like this in Appearance->Customize->Additional CSS

@media screen and (max-width: 568px) {
    .home .entry-content .wc-block-grid__products .wc-block-grid__product {
        float: left;
        width: 33%;
    }
}

Hello @jarretc! I made the screenshots via a laptop but i just showed you how it looked on my phone (Xiaomi Redmi Note 4) and how it looks now after updating woocoommerce 3.9.0 (probably, because i don’t know what else could be the cause), i’m sorry that there were 4 products in a row, now i changed back to 3 and noticed that it shows correctly only from 600px, the resolutions below show in several rows. I will try your code and let you know. Thank you.

• This reply was modified 4 years, 10 months ago by xszejdi.

Your code works great till 480px, from 481px to 600px – 2 products appear in a row, from 601px everything works fine again in one row. The second thing is ‘buy now’ buttons are not centered under the products. I always had checked the option ‘center buy now buttons’ and it always worked.

• This reply was modified 4 years, 10 months ago by xszejdi.

aligned*

Try this CSS

@media (max-width: 600px) and (min-width: 481px) {
  .wc-block-grid.has-3-columns .wc-block-grid__product {
    max-width: 33%;
  }
}

Regarding the Buy Now buttons, they all look centered to me. Do you have a screenshot of the issue you’re seeing with those?

Hi @jarretc!

Your code works again! Thank You.

Yes, i noticed those buttons aren’t aligned till 480px, from 481 it’s fine. Take a look, please:

till 480px – https://i.imgur.com/ntq7eEX.png

from 481px – https://i.imgur.com/wAZtxbe.png

Hello @jarretc,

Any news?