[Resolved] Unsemantic Columns on Tablet

[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

[Tom]

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 🙂

[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.

[Tom]

Perfect! Glad it works for you 🙂

[Author]

Posts