BLACK FRIDAY & CYBER MONDAY SALE! 30% DISCOUNT!! Coupon code:bf30 Enjoy!!!

Tablet width – 3 products per row and footer problem

Home Forums eStore Free Tablet width – 3 products per row and footer problem

This topic contains 5 replies, has 3 voices, and was last updated by  Rajesh 1 week, 5 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1392865

    RonaldW
    Participant

    Hello,

    On my website 4 products are shown per row. At a certain screen width, I’d say for a large tablet it changes to 3 products per row. The thing is, when reaches the size where it shows 3 products per row, there are holes. X’es represent products, black spaces are the places where products aren’t shown:

    X X X
    X
    X X X
    X
    X X X
    X
    X X X
    X

    When I reduce the size a bit further to mobile where it displays 2 products per row, it works as it should.

    Another problem with this same size is that the footer widget 4 isn’t in line with footer 3, it is quite a bit lower:

    (Footer 1) (Footer 2)

    (Footer 3)

    (Footer 4)

    At desktop size, most tablets and phones everything works fine, except when it hits this certain screen width in which these two problems accur. Some help in solving this would be great. Thanks in advance

    Regards,

    Ronald

    #1392948

    Nilan
    Moderator

    Hi Ronald,

    Can you provide us the URL of your website so that we could inspect and provide you a better solution?

    Regards,
    ThemeGrill Support

    #1392952

    RonaldW
    Participant

    Hi,

    The website URL is https://vendendo.nl

    I solved the first issue with the following code I found on another forum:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
      display: inline-block;
      float: none;
      margin: 0 1.2% 30px;
      vertical-align: top;
    }

    For the second problem I couldn’t find anything. If you scroll down to the footer, and slowly decrease your browser’s width you should see the problem I described.

    Thanks in advance.

    Regards,

    Ronald

    #1393101

    Nilan
    Moderator

    Hi Ronald,

    Here is the solution for the second issue. Try the CSS code below.

    #top-footer .tg-column-wrapper {
        display: flex;
        flex-wrap: wrap;  
    }

    This will be helpful to you.

    Regards,
    ThemeGrill Support

    #1393105

    RonaldW
    Participant

    Hello,

    This solved the problem, thank you very much.

    Regards,

    Ronald

    #1393160

    Rajesh
    Moderator

    Hi @RonaldW,

    Glad to know it helped you. If you get any issue later, feel free to ask again. If you liked our theme, you can help us by providing a review here:
    https://wordpress.org/support/theme/estore/reviews/?filter=5

    Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.