Member Avatar for Latrell_vie

Dear Folks !
I´m having problems with my navigation at different screensizes.
At current level the navigation display is nearly the way i want it for the bigger screensizes.
But at media querry @media screen and (max-width: 320px) I want the navigationlinks to stack horizontally which i managed to do but for some reason i cant remove the margin between the now horizally stacked navilinks.
What is my mistake ? Thx a lot.

The Html

<body>
<div class="topnavibar">
 <div class="menubar1">
 <a href="index.html">Home</a>&nbsp 
 <a href="Unsere Philosophie.html">Unsere Philosophie</a>&nbsp
 <a href="Ueber uns.html">&Uumlber uns</a>&nbsp 
 <a href="Portfolio.html">Portfolio</a>&nbsp 
 <a href="Kontakt.html">Kontakt</a>&nbsp 
 <a href="Partner Sites.html">Partner&nbsp;Sites</a>
 <div id="flags">
     <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" onclick="goToAUT()" src="AT.png" height="20" width="20"alt="AUTFlag" />
     <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" onclick="goToGB()" src="GB.png" height="20" width="20"alt="GBFlag" /></div>
</div>
</div>

BigScreen Css

.topnavibar{position:relative;margin-top:1%;height:13%;margin-left:10%;margin-right:10%;text-align:center;font-size: 250%;
            background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
.menubar1{padding:2.3%;margin-top:1%;margin-bottom:1%;margin-left:1%;margin-right:1%;border:black 1px solid;border-radius:3px;}
.menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:17px;
        background:#333;
        padding: 2% 2%;
        color:gold;
        margin-right:10px;
        text-decoration:none;
        border-radius:3px;
        -webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        transition:background 0.3s linear 0s,color 0.3 linear 0s;}
.menubar1 > a:hover{background:gold;color:#333;}
#flags{position:absolute;top:1%;right:3%;cursor: pointer;}

Small Screen Css

@media screen and (max-width: 320px) {
    .topnavibar{position:relative;margin-top:1%;height:13%;margin-left:1%;margin-right:1%;text-align:center;font-size: 250%;
            background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
    .menubar1{border:black 1px solid;border-radius:3px;}
    .menubar1 > a {box-sizing:border-box;display:block;font-family:arial,helvetica,sans-serif;
        padding:0; margin:0;
        font-size:17px;
        background:#333;
        color:gold;
        text-decoration:none;
        border-radius:3px;
        -webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        transition:background 0.3s linear 0s,color 0.3 linear 0s;}

    #Banner{position:relative;top:1em;width: 100%;display: block;margin-left: auto;margin-right: auto;}
    }
  • 3 Contributors
  • 5 Replies
  • 238 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Latrell_vie
Member Avatar for mattster

Remove the &nbsp; in your HTML, and set your margins in css:

@media screen and (max-width: 320px) {
  .menubar1 > a {
    box-sizing: border-box;
    display: block;
    font-family: arial, helvetica, sans-serif;
    padding: 0;
    margin: 10px 0;
  }
}

Notes:

  • There is no need to repeat your code in the @media query. @media takes your existing rules (for big screens) and overwrites them - so no need for excess stuff.
  • Are you only texting this on your desktop? 320px isn't really mobile resolution - few mobiles will have a screen this small. Aim for more 768px (taken from the Bootstrap project).
Member Avatar for Latrell_vie

Thanx alot for the advices mattster. Btw i also solves this issue with display: flex approach.

Member Avatar for Oliver Realize

This might be a bandaid but have you tried using !important after the padding? i.e.

@media screen and (max-width: 320px) {
  .menubar1 > a {
    box-sizing: border-box;
    display: block;
    font-family: arial, helvetica, sans-serif;
    padding: 0 !important;
    margin: 10px 0;
  }
}
Edited by Oliver Realize
Member Avatar for Oliver Realize

This might be a bandaid but have you tried using !important after the padding? i.e.

@media screen and (max-width: 320px) {
  .menubar1 > a {
    box-sizing: border-box;
    display: block;
    font-family: arial, helvetica, sans-serif;
    padding: 0 !important;
    margin: 10px 0;
  }
}
Member Avatar for Latrell_vie

Thx Oliver Realize. Im just sticking with the display:flex approach

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.