Jump to content

responsive elements not working

i can spell html5!

By i can spell html5!
in CSS

 Share

Recommended Posts

i can spell html5! Newbie

i can spell html5!

Posted
Posted

Ive been pulling my hair out for a couple of weeks now tring to make the header of my site responsive. I know im not a great designer but i feel like im missing someing i just cant see. anyway could really use some help. this header has an image in the left hand side, an h1 and h2 tag, and social bar for twitter-facebook-yt on bottom right. any help surely appriciated

and the code 

<!DOCTYPE html>
<html lang="en">
<head>
<title>inahurry</title>
 <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="main.css">
<body>

<header id="header">
<div id=”branding”>
<img src="favorite.jpg">
 </div>
<div class=”container”>
<h1> Nerdypoker.com</h1>
  </div>
  <div class=”container”>
<h2>Your good kid, real good.<br>But as long as I'm alive</br> you're second best.</h2>
</div>

 <IMG STYLE="position:absolute; TOP:98px; right:14px;    WIDTH:30px; HEIGHT:30px  "SRC="facebook.png">
  <IMG STYLE="position:absolute; TOP:98px;  right:65px;     WIDTH:30px; HEIGHT:30px   "SRC="youtube.png">
  <IMG STYLE="position:absolute; TOP:98px;  right:108px;    WIDTH:30px; HEIGHT:30px    "SRC="twitter.png">
 
   
</header>

</body>
</html>

 

 

 

 

 

 

and the css

body { 
    background-color: #FFFAFA;
    width: 100%; 
    margin-right: auto; 
    margin-left: auto; 
}

/* Global */
.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}

 #header{ 
  width:80%;
     background: #DCDCDC;
     padding: 20px; 
    min-height:90px;
    margin:auto;
 }  

 header #branding{
  float:left;
}

 
 header h1{ 
 margin:0px;
 margin:auto;
 text-align: center;
 color:red;
  font: bold 35px Tahoma;
 } 
 
 
 header h2{ 
     float:left;
     font: bold 14px Tahoma; 
    padding-left:350px;
 } 


@media(max-width: 768px){
  header,  header branding,headerh1,headerh2 {
    float:none;
    text-align:center;
    width:100%;
  }
  }
 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...