Forums

3 col layout to responsive?

Permalink
I have added a 3 col layout but it to reduce to single columns for phone browsers.

Can I achieve this with media queries and what would I say?
trixiemay
 
elstruck replied on at Permalink Reply
elstruck
Hello trixiemay,

Yes, @media queries would work. You would need something like so:
@media only screen and (max-width: 900px){
span_1_of_3 {
width: 100%;
}
}


Hope this helps :)
trixiemay replied on at Permalink Reply
trixiemay
So I need to wrap a span tag around each column?

I have used the Add Layout function and made 3 cols but the function has written it own class for each column.

I have tried to use the generated class for each column in a media query with width at 100% but they won't collapse. I just get 3 super skinny columns with a lot of padding.
elstruck replied on at Permalink Best Answer Reply
elstruck
You need to have the same class for all three col's, that way, when you set the width attribute to 100% in @media it makes them collapse. Here, check out this page:
http://www.responsivegridsystem.com/...

study/grab the code from here, it'll make sense to you!
trixiemay replied on at Permalink Reply
trixiemay
Thanks. That's an awesome resource.

I have been looking at moving to the Skeleton framework.