columns but only on screens larger than iPad portrait

Generatepress (and also the columns plugin) uses the unsemantic css framework. Try using their classes instead, it comprehends classes for mobile tablets and desktop and you should be covered using just that. No need to add more responsive classes for handling the collapse behavior of columns.

I usually start my generatepress custom css like this to have a little more control of what happens at any given breakpoint:

@media only screen and ( min-width: 1024px ) {

    /*Desktop Only Styles*/
    
}

/*JUST FOR TABLETS*/
@media (min-width: 768px) and (max-width: 1024px) {

    /*Tablet Only Styles*/

}

/*STYLES JUST FOR MOBILE*/

@media screen and (max-width: 768px) {

    /*Mobile Only Styles*/

}

Hello Roberto

Thanks for the reply.

I tried that originally but couldn't find the CSS I needed to make iPad portrait stack and landscape to display the grid.

Can you give this a shot?

<div class="grid-33 tablet-grid-100 mobile-grid-100">
    Content here
</div>

Hello Leo

Thanks for the code.
I tried it but the tablet setting covers BOTH portrait and landscape settings for iPad.

I want to go to a single column on portrait view in iPad.

Sometimes three columns in the narrower portrait view looks too squished up for the page content I want to use.

You would have to adjust the grid classes inside your own media queries. You can find specific media queries for each device here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Thanks Tom

It was the grid classes that I couldn't find, not the media queries.

Although the code I’ve got is based on Bootstrap it seems to work OK so I’ll use that unless I discover any problems.

All of the built in classes can be found here: https://unsemantic.com/css-documentation#2-grid-classes

The bootstrap grid will absolutely work as well :)

Thanks Tom that solves my problem.

You're welcome :)