Jump to content

making it respond


i can spell html5!
 Share

Recommended Posts

im having trouble getting my headeresposive and not sure exactly where im going wrong. can make things look ok when fixed but not on moble,anyway

<header id="top_header">

 <IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:350px; HEIGHT:130px  "SRC="favorite.jpg">
 <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">
 <h1> sitename.com</h1>
<h2>this is some text here.<br>this is the second part of the text.</h2>
</header>

 

and css.

 #top_header{
     position:relative;
    background:   #F5F5F5;
     width:60%;
     left: 350px;
     top: 5px;
     border: .25px  brown; 
     padding: 20px; 
    height:90px;
    border-bottom: 1px solid  black; 
    border-top:  1px solid  black;
    border-left:  1px solid  black; 
    border-right: 1px solid  black;

 }  

  #top_header h1{
     position:relative;
        color:red;
        font-size:225%;
     left: 550px;
     top: -30px; 
     padding: 20px; 
    height:90px;
    

 }  
 
   #top_header h2{
     position:relative;
     width:60%;
     left: 330px;
     top: -105px;
     padding: 20px; 
    height:90px;
 }

@media(max-width: 768px){
top header,top header h1,top header h2
    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

×
×
  • Create New...