Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Unsemantic Columns on Tablet

Home Forums Support Unsemantic Columns on Tablet

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #142379
    Andy

    Hi,

    I have a client’s site built here: http://tinyurl.com/nbx58dl, I’ve noticed recently after someone showed me the site on a Ipad Mini that the 5 services (circles) columns on the homepage are being centred and stacked which doesnt look very good as it leaves alot of white space either side and also adds unnecessary scrolling.

    I believe adding the following media query to the child stylesheet will work, but is this the best way to achieve it?.

    @media (min-width: 768px)
    .grid-20 {
        float: left;
        width: 20%;
    }    
    

    Any help appreciated.

    tia.

    P.S) I want to keep the circles stacked on mobiles and smaller tablets

    #142387
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Nice site!

    When using the grid, you can make use the tablet- and mobile- classes as well.

    For example:

    <div class="grid-20 tablet-grid-20 mobile-grid-100">

    The above would be 20% on desktop and tablet, but 100% on mobile.

    You can tweak those any way you like – pretty awesome stuff 🙂

    #142397
    Andy

    Super, I had a feeling there would be something like that, works brilliantly. Glad you like the site, I try and keep my designs ‘clean’ and your ‘clean’ theme seems to work really well for me.

    #142413
    Tom
    Lead Developer
    Lead Developer

    Perfect! Glad it works for you 🙂

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