[Resolved] Responsive product archive layout.

Home Forums Support Responsive product archive layout.

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1135782

    So I have been struggling with this one for some time. I discussed it with Tom some time ago and he mentioned that a fix would be coming with the last update. The responsive design has improved, but I still have some issues.

    Hey GP team,

    The issue is with the Woocommerce product archive pages.

    Desktop view is fine, but iPhone and iPad are not ideal.

    iPhone (6/7/8 and X) in portrait is good at 1 column, but should change to 2 columns in landscape (iPhone X should be 3 columns in landscape).

    iPad in portrait should be 3 columns without sidebar and should convert to 3 columns with sidebar in landscape (iPad Pro can display the sidebar in both orientations).

    My current live site is on Divi (unfortunately) and I have been working to migrate the site over to Generate Press. One thing that Divi has covered well is the responsive design. If you have a play round with the page linked below you will see exactly what I would like to achieve on Generate Press.

    Divi site – https://moderncooking.com/product-category/cookware/kitchen-knives/

    Here is the same page on my Generate Press staging.

    Generate Press staging – https://mcstaging.co.uk/product-category/cookware/kitchen-knives/

    This is one of the last tickets I have left before pushing this staging live. It would be great to get it resolved soon.


    Lead Developer
    Lead Developer

    Hi there,

    I assume you’re taking advantage of our tablet option for the columns?

    It sounds like you might just need to adjust the breakpoints in the theme.

    Right now, they’re set to this:

    Desktop: (min-width:1025px)
    Tablet: (min-width: 769px) and (max-width: 1024px)
    Mobile: (max-width:768px)

    To change them, you can do this (just examples):

    add_filter( 'generate_media_queries', function( $queries ) {
        $queries['tablet'] = '(min-width: 750px) and (max-width: 1024px)';
        $queries['mobile'] = '(max-width: 749px)';
        return $queries;
    } );

    Let me know if you’re able to accomplish what you’re after with those πŸ™‚


    Thanks Tom,

    I’ve had a play around and I’m getting close to resolving things.

    I think I should be able to get it right from here.


    Lead Developer
    Lead Developer

    Awesome! Let me know if you need anything else πŸ™‚

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