[Resolved] product category on moblie phone is too small

[PING Yao]

Hi there,

https://tiedown.com.tw/product-page/

I assigned a page as product category
However, the image is too small and the texts are jammed

Are there any ways to solve this
thanks

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[PING Yao]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[PING Yao]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[PING Yao]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[PING Yao]

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

[PING Yao]

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

[Elvin]

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/

A wise man once said:
"Have you cleared your cache?"

[PING Yao]

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

[Elvin]

Nice one.

No problem. Glad to be of any help. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts