product category on moblie phone is too small

Hi there,

your products are set to display in 4 columns. To make the products larger you will need to reduce the Product Columns in Customizer > Layout > Woocommerce.

https://docs.generatepress.com/article/woocommerce-overview/#shop

Hi David,

I have checked woocommerce settings

In mobile setting, it shows 1 instead of 4

the problem is, when I have preview in mobile phone on generateprepess.

It shows correct "1" on preview.
However,
when I go to real mobile phone, it"s just jammmed

https://photos.app.goo.gl/J6GjjmVREYtkbRMB6

my system setting:
https://photos.app.goo.gl/1uqFC2VT1YD2KJ2BA
https://photos.app.goo.gl/6JKMH9RiuQhJdAjc7

thanks

Try increasing the Customizer > Woocommerce > Product Images --> Thumbnail Width to 400px.

Dear David,
I have follow your suggestion to change the thumbnail to 400 px
https://tiedown.com.tw/product-page/

Once again, it shows correct in generatepress preview.
however, it still jammed in real mobile phone.

any suggestions?

thanks

Can you make sure you have cleared your mobile phone browser cache ?

Hi David,
I have asked Kinsta.com to clear all cache
But the result is the same

i have spent all day and try to solve this problem, but without any success.
Would you please check my site

thanks
Henry

You need to upload larger images, their current size is only 274 by 274 pixels

Hi David,

I have upload a image which is 400X400

I feel that is not a photos size problem
because it shows 4 columns on mobile phone instead of one even the setting is one column on mobile phone.

Also, I clear cache and use other mobile phones to check and all of them show 4 columns on mobile phone

https://drive.google.com/file/d/1NjLFlbmweoUbOZY6aPrdQFAI14OpGo95/view?usp=sharing

Is there anyway to solve this problem, otherwise, I am gonna get stuck at this point and can not move on

thanks
Best Regards,
Henry

Hi David,

I found that the problem is the site is not "responsive"
please check a product page
https://tiedown.com.tw/product/testing1/

products category is not responsive and product page is also not responsive

Perhaps, this is the key point of this issue
Any ideas of that?

thanks
Best Regards,
Henry

Hi,

I feel that is not a photos size problem
because it shows 4 columns on mobile phone instead of one even the setting is one column on mobile phone.

I believe your site's mobile view is also having issues w/ column gaps.

The product contents are being squished on mobile because its still using 50px grid-gap between the columns.

And since the page is still using a 4 column grid even on mobile view, the display grid is forcing the columns to fit everything in 1 row along with the grid-gap.

That said, we can adjust the grid-gap of woocommerce product grids for mobile view by going to Appearance > Customize > Layout < Woocommerce and set the column gap as shown here: https://share.getcloudapp.com/WnurLjLP

If this doesn't work, we can try adding a CSS @media query rule so your product columns use a smaller grid-gap value when viewed in smaller viewports.

Try adding this CSS:

@media (max-width:768px){
.wc-columns-container .products, .woocommerce .related ul.products, .woocommerce .up-sells ul.products {
    grid-gap: 10px;
}
}

Here's how to add CSS - https://docs.generatepress.com/article/adding-css/

Hi Elvin and David,

thanks for your time solving this issue.
I do appreciate that.
The issue is solved.
You may close this case

Once again,
thanks for Generatepress support team.

Henry from Taiwan

Nice one.

No problem. Glad to be of any help. :)