CODEWITHSUNDEEP
cssresponsive-design
user2915962
user2915962

Reputation: 2711

CSS ,Responsive design

Let's say I have the following mark-up:

<style type="text/css">
    .floatleft {
        float: left;
     }

    .floatright {
        float: right;
     }
</style>

<div id="container">
      <div id="box1" class="floatleft"></div>
      <div id="box2" class="floatright"></div>   
</div>

When I view this on a small screen on an iPad or iPhone etc. The two boxes will either:

Q: How do I make #box2 jump down under the first <div />?

Upvotes: 1

Views: 85

Answers (3)

DaniP
DaniP

Reputation: 38262

You just need to remove the property float with mediaqueries:

@media screen and (max-width:480px) {
   #box1, #box2 {
     float:none;
   }
}

The demo http://jsfiddle.net/yYq8W/8/

Upvotes: 1

darthmaim
darthmaim

Reputation: 5158

Use media queries and remove the floating on small sized screens.

Upvotes: 1

Dai
Dai

Reputation: 155608

Change #box2 to float: left; when on a mobile device, using a media query.

Upvotes: 1

Related Questions