Responsive product archive layout.

[moderndev]

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.

Best,
Peter

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[moderndev]

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.

Best,
Peter

[Tom]

Awesome! Let me know if you need anything else 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts