The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> media query not taking effect
mp3909
post May 18 2020, 11:53 AM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264



Why is my media query not working?
When screen size is less than 760px, then font size of the "a tags" should be 2rem.
When screen size is greater than or equal 760px then font size of the "a tags" should be 0.7rem.

But it seems like this is not taking effect.

Here is my html:

CODE
<!DOCTYPE html>

<html>
    <header>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="nestedFlex.css">
    </header>
    <body>
        <div class="wrapper">
            <nav>
                <ul class="non-social">
                    <li><a href="#">home</a></li>
                    <li><a href="#">about us</a></li>
                    <li><a href="#">contact us</a></li>
                    <li><a href="#">store</a></li>
                </ul>

                <ul class="social">
                    <li><img src="images/facebook.png"></li>
                    <li><img src="images/twitter.png"></li>
                </ul>
            </nav>
        </div>
    </body>
<html>



And here is my css:

CODE
html {
    font-size: 16px;
}

nav {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    background-color: #333;
}

nav ul {
    padding-left: 0px;
    text-align: center;
    margin: 0;
}

nav li {
    list-style-type: none;
    display: block;
    padding: 2px;
}

nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: 2rem;
}

nav li:hover {
    background-color: #555;
}

.social {
    display: flex;
    justify-content: center;
}

@media screen and (min-width:760px) {
    nav a {
        font-size: 0.7rem;
    }
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 18 2020, 02:56 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,444
Joined: 10-August 06
Member No.: 7



Works for me in all my browsers.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th June 2020 - 06:15 PM