[Resolved] columns but only on screens larger than iPad portrait

[PHILIP]

Hello Tom and co

I want to use columns, but only on screens larger than iPad portrait.
I couldn’t find an easy way to do this using the Lightweight Grid Columns plugin.

I Googled: column classes
And found this page…
https://gist.github.com/studiopress/5700003

I wrapped that CSS in a media query…

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

CSS CODE GOES HERE

}

In the provided HTML I changed the clearing div to this…

<div class="clear"></div>

To make space between rows I could use a hr tag: <hr />

This seems to work OK. But do you know of any reason anything might conflict?
I would not use the Lightweight plugin and the column class code on the same site.

Thanks
Philip.

[Roberto Enrique]

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*/

}

[PHILIP]

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.

[Leo]

Can you give this a shot?

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

[PHILIP]

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.

[Tom]

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/

[PHILIP]

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.

[Tom]

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 🙂

[PHILIP]

Thanks Tom that solves my problem.

[Tom]

You’re welcome 🙂

[Author]

Posts