i can spell html5! Posted September 7, 2020 Report Share Posted September 7, 2020 so far my header is looking somewhat better but in media quarries when i remover the floats thats seems to put my h1 and p(both within my top header) coliding into each other and the image to the leaft. if i remove the floats with media quarries how do i prevent this. thanks. 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"> <IMG SRC="favorite.jpg"> <div class=”container”> <h1> Nerdypoker.com</h1> </div> <div class=”container”> <p>Your good kid, real good.<br>But as long as I'm alive</br> you're second best.</p> </div> <div class=”container”> </div> </header> </body> </html> and the css: body{ font: 15px/1.5 Arial, Helvetica,sans-serif; padding:0; margin:0; background-color:#FDFEFE ; } /* Global */ .container{ width:80%; margin:auto; overflow:hidden; } /* Header **/ header{ width:80%; margin:auto; overflow:hidden; background: #F2F4F4;; color:#ffffff; padding-top:0px; min-height:70px; } #header img { padding-top: 0px; float:left; display: inline; } header h1{ display: inline; float:right; color:red; margin-right:650px; margin-top:10px; } header p{ display: inline; padding-top: 80px; padding-left: 30px; position: relative; float:left; color:black; } /* Media Queries */ @media(max-width: 768px){ header #branding, header h1, header h2, header p{ float:none; text-align:center; width:100%; color:blue; } } Link to comment Share on other sites More sharing options...
dsonesuk Posted September 8, 2020 Report Share Posted September 8, 2020 Display inline basically gives you the same effect as float, remove this. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now