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: 9,648
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
« Next Oldest · Cascading Style Sheets · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 01:43 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC