[Resolved] product category on moblie phone is too small

Home Forums Support [Resolved] product category on moblie phone is too small

Home Forums Support product category on moblie phone is too small

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1533043
    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

    #1533101
    David
    Staff
    Customer Support

    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

    #1533167
    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

    #1533221
    David
    Staff
    Customer Support

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

    #1533899
    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

    #1534315
    David
    Staff
    Customer Support

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

    #1534418
    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

    #1534583
    David
    Staff
    Customer Support

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

    #1535362
    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

    #1535401
    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

    #1535404
    Elvin
    Staff
    Customer Support

    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?"

    #1535563
    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

    #1536653
    Elvin
    Staff
    Customer Support

    Nice one.

    No problem. Glad to be of any help. 🙂

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

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.