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

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

Home Forums Support columns but only on screens larger than iPad portrait

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #343267

    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…

    I wrapped that CSS in a media query…

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

    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.


    GP Premium 1.3.1
    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*/
    @media (min-width: 768px) and (max-width: 1024px) {
        /*Tablet Only Styles*/
    @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.

    Customer Support

    Can you give this a shot?

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

    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.

    Lead Developer
    Lead Developer

    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.

    Lead Developer
    Lead Developer

    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.

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