Oladunni Faith Posted August 10, 2021 Share Posted August 10, 2021 (edited) Good day Anyone? I was practicing Navigation bars in w3school tutorial earlier today and came across media query. My intention was to just try it the same way it was written on the tutorial platform since I haven't gotten to the topic yet. The first one @900px worked well, the second @400px doesn't seem to work. please can someone help me on this? As I've been trying to find this bug but can't. Also tried making it sticky and it worked. HERE'S THE CODE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidenav</title> <style> body{ margin: 0; background-color: black; color: white; } h1{ color: darkred; text-align: center; font-weight: bold; font-style: italic; } h3{ color: darkred; text-align: left; font-weight: bold; font-style: italic; } ul.sidenav{ margin: 0; padding: 0; list-style-type: none; background-color: darkgray; overflow: auto; width: 30%; height: 100%; position: fixed; } ul.sidenav li a{ text-decoration: none; color: black; padding: 15px; display: block; } ul.sidenav li a.active{ background-color: dodgerblue; color: white; } ul.sidenav li a:hover:not(.active){ background-color: dodgerblue; color: white; } .content{ margin-left: 30%; height: 1000px; padding: 15px; } @media screen and (max-width: 900px){ ul.sidenav{ width: 100%; height: auto; position: relative; } ul.sidenav li a{ float: left; padding: 15px; } .content{ margin-left: 0; } } @media screen and (max-width: 400px){ ul.sidenav li a{ text-align: center; float: none; } } </style> </head> <body> <span> <ul class="sidenav"> <li> <a href="#home">HOMEPAGE</a> </li> <li> <a class="active" href="blogs">OUR BLOGS</a> </li> <li> <a href="customerservices">OUR CUSTOMER SERVICES</a> </li> <li> <a href="#tour">TAKE A TOUR</a> </li> <li> <a href="#booknow">BOOK A FLIGHT NOW</a> </li> <li> <a href="#contactus">CONTACT US</a> </li> </ul> </span> <div class="content"> <h1>My Responsive Sidenav Practice</h1> <p>This practice use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p> <p>I have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p> <p>I hope to learn more about media queries and responsive web design later in my CSS Tutorial journey.</p> <h3>Resize the browser window to see the effect.</h3> </div> </body> </html> Edited August 10, 2021 by Oladunni Faith Link to comment Share on other sites More sharing options...
Ingolme Posted August 10, 2021 Share Posted August 10, 2021 I don't know what you want the code to do. Your 400px rule is just turning off floating for the <a> elements and centering the text. The <a> elements are wrapped in <li> elements which do not have any specific styles for 400px. You probably need to change styles for those <li> elements to achieve your goal. Link to comment Share on other sites More sharing options...
Oladunni Faith Posted August 10, 2021 Author Share Posted August 10, 2021 Rule as in? I can't find any problem related with the <li> rules. Each texts on the link should stand on its own @400px. Please take a look at this https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive Link to comment Share on other sites More sharing options...
Ingolme Posted August 10, 2021 Share Posted August 10, 2021 I tested your code again and it appears to be working correctly. Under 400px, each item is on its own line. Is there some other effect that should be happening? 1 Link to comment Share on other sites More sharing options...
Oladunni Faith Posted August 10, 2021 Author Share Posted August 10, 2021 yes each links texts should be standing on its own @400px instead of floating side by side to each other. LIKE THIS: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive Link to comment Share on other sites More sharing options...
Ingolme Posted August 10, 2021 Share Posted August 10, 2021 I copied the code from your post, put it into an HTML file and tested it. It is working as expected. What are you seeing when you run the code? Link to comment Share on other sites More sharing options...
Oladunni Faith Posted August 11, 2021 Author Share Posted August 11, 2021 I've tried sending a screenshot from my computer but the file seems too large to be uploaded. Yes it stands alone at full screen but it obeys same rule at 900px when @400px Link to comment Share on other sites More sharing options...
Ingolme Posted August 11, 2021 Share Posted August 11, 2021 The max-width rule applies to all screen widths up to the number specified in the rule. If you want to remove the styles from smaller screens then you have to use min-width as well. @media screen (min-width:401px) and (max-width: 900px){ 1 Link to comment Share on other sites More sharing options...
Oladunni Faith Posted August 11, 2021 Author Share Posted August 11, 2021 Ok thanks... I'd look into this..... Haven't studied media queries yet.... Just trying things 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