All geek questions in one place

Delete all spaces in the media query navigation bar

I created a media query for phones with a width of 414 pixels or less, or iPhone 6 plus a portrait. I am trying to make a drop down menu and I have everything to work, its just the navigation bar is not moving. I gave him "margin: 0, padding: 0" on the left and right and everything above and nothing. If you open my site in the “control element” and select “iPhone 6plus”, you will see that my navigation bar has many white spaces and should be aligned to the left, and all white fields and gaskets are cleared. Can someone please show me how I can return it to the top left or atlas, remove all white spaces in my media request for "iphone 6plus" or screen sizes less than 414. My html will be uploaded here and the rest will be in the code handle.

Demo: http://codepen.io/anon/pen/NpwbJp

Screenshot https://i.gyazo.com/605e7bb39ef78197fa24e2dcdab03427.png

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


        <link rel="stylesheet" type="text/css" href="magicstyle.css">

        </head>     
        <body>
            <!-- Section for Jobs Popup -->
            <div id="top-bar">
                  <a class="burger-nav"></a>
                    <ul id="nav-menu" class="testAgain">
                    <li id="job" class="testAgain">Job</li>
                    <li id="contact" class="testAgain">Contact</li>
                    <li id="press" class="testAgain">Press</li>
                    <li id="legal" class="testAgain">Legal</li>
                    <li id="support" class="testAgain">Support</li>


                </ul>
                    <!--<div id="nav-menu">
                    <span id="job">Jobs</span>
                    <span id="contact">Contact</span>
                    <span id="press">Press</span>
                    <span id="legal">Legal</span>
                    <span id="support">Support</span>

                    </div> -->


                </div>
                 <div id="job-popup">
            <div class="x-div1"><img class="x-icon1" id="fadeX1" src="Pictures/web%20x%20icon%20white.png" alt="Text alternative when image is not available"></div>
            <div id="job-content">

                <h1 id="jobWords"></h1>

                </div>

            </div>
            <!-- Section for Contact Popup -->
            <div id="contact-popup">
            <div class="x-div2"><img class="x-icon2" id="fadeX2" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="contact-content">

                <h1 id="contactWords"></h1>

                </div>

            </div>

            <!-- Section for Press Popu -->
             <div id="press-popup">
            <div class="x-div3"><img class="x-icon3" id="fadeX3" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="press-content">

                <h1 id="pressWords"></h1>

                </div>

            </div>

            <div id="legal-popup">
            <div class="x-div4"><img class="x-icon4" id="fadeX4" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="legal-content">

                <h1 id="legalWords"></h1>

                </div>

            </div>

            <div id="support-popup">
            <div class="x-div5"><img class="x-icon5" id="fadeX5" src="Pictures/web%20x%20icon%20white.png"></div>
            <div id="support-content">

                <h1 id="supportWords"></h1>

                </div>

            </div>




            <div id="container">


                <div id="name-div">
                <h1 id="name">Open Touch</h1>
                </div>
                <ul class="bubbles">

            <li id="firstCircle"></li>
            <li id="secondCircle"></li>
            <li id="thirdCircle"></li>
            <li id="fourthCircle"></li>
            <li id="fifthCircle"></li>
            <li id="sixthCircle"></li>



            </ul>



            </div>


        </body>





</html>

Any help at this point is greatly appreciated.

+4
source share
1 answer

The problem is your CSS layout. The question of your @media queries matters.

So here is your

@media screen and (max-width:770px)

takes precedence over

@media screen and (max-width: 414px)

just because it came last in the code, and in this case max-width: 414also follows the rules max-width 770px, because everything under 414px is also under 770px.

so just reorder the code in the CSS file.

After that, as for id tag fields #nav-menu, putmargin: 0;

Hope this helps :)

+1
source

Source: https://habr.com/ru/post/1672497/

More articles:


All Articles