CODEWITHSUNDEEP
htmlcss
abk92
abk92

Reputation: 1

Trouble with responsive header

I'm having some issues with trying to make the header logo and the links announce my report and send me alerts as shown on this page re size into what is shown in this image here.

I've tried adjusting the margin and padding of the links when the browser re sizes with media query but I can't seem to get the links to stay on the same line and I also cant seem to get the first link announce my report to float to left so that it goes right to edge once it re sizes. Any suggestions on how I can get it to re size down to that for mobile layout?

HTML

<div class="row">
  <div class="col-md-12">
      <div class="logo" style="float:left"> <a href="http://www.reportalert.info/">
       <img src="images/nra/ra-logo.png" />
        </a> </div>
      <div id="utils-red" align="right"> <a class="announce_red" href="/announce">announce my report</a> <a class="sendalerts_red" href="/signup">send me alerts</a> </div>
    </div>
</div>

CSS

#utils-red
{
float:right;
margin:55px 0 0 0;
color:#fff;
font-family: 'RBNo21a-BlackDEMO';
font-size:23px;
text-decoration:none;
letter-spacing:1px;
text-align:center;
height:37px;
font-variant:small-caps;
}

a.announce_red, a.sendalerts_red
{
clear:both;
background:url(/images/nra/ra-red-action.png) left repeat-x;
background-position: 0 -35px;
padding:5px 20px;
text-decoration:none;
margin:0 0 0 20px;
outline:none;
}
a.announce_red:hover, a.sendalerts_red:hover
{
background-position:0 0;
text-decoration:none;
padding:5px 20px;
outline:none;
}

Thanks in advance for your help.

Upvotes: 0

Views: 87

Answers (3)

Green Wizard
Green Wizard

Reputation: 3667

your css can be changed as follows

#utils-red
{
margin:55px 0 0 0;
color:#fff;
font-family: 'RBNo21a-BlackDEMO';
font-size:10px;
text-decoration:none;
letter-spacing:1px;
text-align:center;
font-variant:small-caps;
}

a.announce_red, a.sendalerts_red
{
float:left;
background:url(/images/nra/ra-red-action.png) left repeat-x;
background-position: 0 -35px;
text-decoration:none;
outline:none;
margin-left:20px;
}

a.announce_red:hover, a.sendalerts_red:hover
{
background-position:0 0;
text-decoration:none;
outline:none;
}

:)

Upvotes: 0

ralph.m
ralph.m

Reputation: 14365

You could add something like this to your styles:

@media only screen and (max-width: 700px) {
    #utils-red {float: none;}
    a.announce_red, a.sendalerts_red {margin: 0 20px 0 0;}
}

Upvotes: 1

maurelio79
maurelio79

Reputation: 292

If you want links on the same line, you need to float also your tag <a>.

Try:

.announce_red, .sendalerts_red {
   float: left;
}

P.S: You need to remove clear:both;

Upvotes: 0

Related Questions