[Resolved] Unsemantic Columns on Tablet

Home Forums Support Unsemantic Columns on Tablet

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


    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.


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

    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 πŸ™‚


    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.

    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.