How do I conditionally align elements based on screen size?

Question

I have a fairly simple header on my site:

<header>
      <nav class="navbar navbar-inverse" style="">
  <div class="navContainer">
    <div id="navbar">
        <div id="leftNavSection">
        <img alt="My Logo" width="300" src="/assets/main_logo-791a416e4f99d38a339debb8dcebd7361d4172919425ace42ba2ce90336218e2.png">        
        </div>
        <div id="rightNavSection">
        Logged in as Dave A
        <a href="/users/edit">Edit</a>
        <a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
    </div>
    </div>
  </div>
</nav>
    </header>

I align the logo to the left and the Logout links to the right:

#leftNavSection {
  float: left;
}

#rightNavSection {
  float: right;
}

What I would like, however, is if the screen size is small (mobile browsers), for the Log Out links to appear aligned to the left beneath the logo.

However, when I change the “float:right” to “float:left” this doesn’t happen. Here is my Fiddle — https://jsfiddle.net/kje3q74k/. How do I pull this off?

You should take a look into [CSS Media Queries](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile). That being said, try `float: none;` if you want the element to be pushed underneath instead of adjacently. — Tyler Roper, Oct 05 '16 at 15:00

score 0 · Accepted Answer · answered Oct 05 '16 at 16:06

So here's one way to do it:

Add min-width: 50% to the leftNavSection and rightNavSection.

This allows the rightNavSection to wrap to the second line on smaller displays when the content widths forces it down.

Remove the default margin of body using to adjust for the 100% width of the navbar:
```
body {
  margin: 0;
}
```
Now the wrapping will occur exactly below 600px!
Float the rightNavSection to the left and align it to the right using text-align: right

Below 600px use text-align: left using media query:
```
@media only screen and (max-width: 600px) {
  #rightNavSection {
    text-align: left;
  }
}
```

snippet below:

body {
  margin: 0;
}
header {
  overflow: hidden;
}
#navbar {
  width: 100%;
  font-family: Arial;
  vertical-align: top;
  display: inline-block;
}
#leftNavSection {
  float: left;
  min-width: 50%;
}
#rightNavSection {
  float: left;
  min-width: 50%;
  text-align: right;
}
@media only screen and (max-width: 600px) {
  #rightNavSection {
    text-align: left;
  }
}

<header>
  <nav class="navbar navbar-inverse" style="">
    <div class="navContainer">
      <div id="navbar">
        <div id="leftNavSection">
          <img alt="My Logo" width="300" src="http://placehold.it/300x300">
        </div>
        <div id="rightNavSection">
          Logged in as Dave A
          <a href="/users/edit">Edit</a>
          <a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
        </div>
      </div>
    </div>
  </nav>
</header>

Hope you can take it forward from the above example. Let me know your feedback on this. Thanks!

I gave your suggestion a shot -- https://jsfiddle.net/kje3q74k/1/ , but the right section is not aligning completely to the right even though the screen is above 600 pixels wide. I still want it to align all the way to the right if there is ample (> 600px) width. — Dave, Oct 05 '16 at 16:56
you missed some styles for `rightNavSection` see this: https://jsfiddle.net/ks9z7waz/ — kukkuz, Oct 05 '16 at 16:59

How do I conditionally align elements based on screen size?

1 Answers1