Archived topic
Unsemantic Columns on Tablet
3 replies · Started by Andy on October 6, 2015
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
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.
Perfect! Glad it works for you :)