Fluid Design on Mobile Device

Question

I am attempting to code a "semi-fluid" item for a mobile site and need a bit of help.

What I am looking to do is realign the layout when viewed vertical or horizontal.

When viewed vertically it should be...

enter image description here

Horizontal should be...

enter image description here

you may need to give a better description, have you got any css/html you've tried already? The more you give the better the responses will be — Iamsamstimpson, Jul 24 '13 at 16:23

score 1 · Accepted Answer · answered Jul 24 '13 at 16:24

While it is a fairly rudimentary example, You can simply float the elements left when the screen is above a certain size. This is accomplished using a media query. You can assign media queries in CSS3 and can find the documentation here.

@media (max-width: 600px) {
    #green, #red {
        float: none;    
    }
}

Here is the jsFiddle for the simple solution.

Fluid Design on Mobile Device

1 Answers1