Jump to content

problem with CSS media query


Oladunni Faith
 Share

Recommended Posts

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{
            margin0;
            background-colorblack;
            colorwhite;
        }
        h1{
            colordarkred;
            text-aligncenter;
            font-weightbold;
            font-styleitalic;
        }
        h3{
            colordarkred;
            text-alignleft;
            font-weightbold;
            font-styleitalic;
        }
        ul.sidenav{
            margin0;
            padding0;
            list-style-typenone;
            background-colordarkgray;
            overflowauto;
            width30%;
            height100%;
            positionfixed;
        }
        ul.sidenav li a{
            text-decorationnone;
            colorblack;
            padding15px;
            displayblock;
        }
        ul.sidenav li a.active{
            background-colordodgerblue;
            colorwhite;
        }
        ul.sidenav li a:hover:not(.active){
            background-colordodgerblue;
            colorwhite;
        }
        .content{
            margin-left30%;
            height1000px;
            padding15px;
        }
        @media screen and (max-width900px){
            ul.sidenav{
                width100%;
                heightauto;
                positionrelative;
            }
            ul.sidenav li a{
                floatleft;
                padding15px;
            }
            .content{
                margin-left0;
            }
        }
        @media screen and (max-width400px){
            ul.sidenav li a{
                text-aligncenter;
                floatnone;
            }
        }
    </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 by Oladunni Faith
Link to comment
Share on other sites

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

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?

  • Thanks 1
Link to comment
Share on other sites

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

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){

 

  • Thanks 1
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...