div behavior in responsive design

Question

I'm having trouble getting some content to behave on smaller screens using Gantry framework in Rockettheme template Ionosphere. I would like to have these two divs next to each other but when its displayed on a small screen, the text overlaps into the next div.

Is there a way I can keep this basic centered look on a large screen and then have the 2nd div fall below on a small screen?

<div style="float: left; padding: 20px; width: 100%;">
<div style="float: left; width: 50%;">
<h2>Vegas All Nite, LLC</h2>
Phone: (702)516-8852 <br /> Support: info@VegasAllNite.com<br />Reservations: reservations@vegasallnite.com</div>
<div style="float: left; width: 50%;">
<h2>Social Media</h2>
FaceBook - Vegas All Nite<br /> Twitter - Coming Soon<br /> Google + - Coming Soon<br />YouTube - Coming Soon</div>
</div>

score 0 · Answer 1 · answered Dec 04 '13 at 03:04

You can add the display in the div with the 50% in width

Use display:table in this will make the divs go one over the other when is no room for both

Example here http://jsfiddle.net/tZC5Y/

  <div style="float: left; padding: 20px; width: 100%;">
<div style="float: left; width: 50%;">
<h2>Vegas All Nite, LLC</h2>
Phone: (702)516-8852 <br /> Support: info@VegasAllNite.com<br />Reservations: reservations@vegasallnite.com</div>
<div style="float: left; width: 50%;">
<h2>Social Media</h2>
FaceBook - Vegas All Nite<br /> Twitter - Coming Soon<br /> Google + - Coming Soon<br />YouTube - Coming Soon</div>
</div>

score 0 · Answer 2 · answered Dec 04 '13 at 03:06

Yes, using media queries. Set a class to your inner div's - say .content. Then in your css apply the initial style rules:

.content {
  float:left;
  width:50%;
  word-wrap:break-word;
}

Basically, what you had in your inline css - with the addition of the word-wrap:break-word rule (this will make sure your text doesn't overlap with the other div.

Then you set up your media query:

@media screen and (max-width: 320px) {
  .content {
    width:100%;
  }
}

This will expand your inner divs the full width, which will make the second div fall under the first. The max-width rule in the media query will make sure that rules inside that block only apply to screens that have a max width of 320px (which you can change to whatever size you desire of course).

score 0 · Answer 3 · answered Dec 04 '13 at 06:06

Try below code ...

use media queries with set a class of inner div.

<style type="text/css">
    .contentdiv
    {
        float: left;
        width: 50%;
    }
    @media screen and (max-width: 480px) //You can change as you want.
    {
        .contentdiv
        {
            width: 100%;
            float:none;
        }
    }
</style>
<div style="width: 100%;">
    <div style="padding: 20px;">
        <div class="contentdiv">
            <h2>
                Vegas All Nite, LLC</h2>
            Phone: (702)516-8852
            <br />
            Support: info@VegasAllNite.com<br />
            Reservations: reservations@vegasallnite.com</div>
        <div class="contentdiv">
            <h2>
                Social Media</h2>
            FaceBook - Vegas All Nite<br />
            Twitter - Coming Soon<br />
            Google + - Coming Soon<br />
            YouTube - Coming Soon</div>
        <div style="clear: both;">
        </div>
    </div>
</div>

div behavior in responsive design

3 Answers3