[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
    Posts
  • #343267
    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.

    GP Premium 1.3.1
    #343303
    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*/
    
    }
    #343355
    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.

    #343454
    Leo
    Staff
    Customer Support

    Can you give this a shot?

    <div class="grid-33 tablet-grid-100 mobile-grid-100">
        Content here
    </div>
    #343485
    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.

    #343509
    Tom
    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/

    #343526
    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.

    #343548
    Tom
    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 🙂

    #343593
    Philip

    Thanks Tom that solves my problem.

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