CODEWITHSUNDEEP
htmlcss
Hayley Walters
Hayley Walters

Reputation: 321

My nav bar collapses at 300px width. Elements inside nav bar collapse at 400px

My code is really sloppy and I really don't know how to use media queries. I've really just been feeling my way around and now I have a really sloppy unresponsive nav bar. Please help me fix it. It collapses at 300px width and the elements inside get all weird at 400px. I'd also really like to know a better way to write media queries. Whenever I want to change something I feel like I have to add a million of them even though I probably don't.

.nav {
    width: 100%;
    height: 5%;
    border-bottom: 2px solid white;
    background-color: #333333;
    z-index: 98;
    text-align: center;
    position: fixed;
    padding: 1% 0;
    top: 0;
}

.nav ul li {
    display: inline-block;
    width: 20%;
    list-style-type: none;
    margin: 1% 0 0 0;
    z-index: 99;
}

.nav ul li a {
    text-decoration: none;
    color: white;
    padding: 5px 20px;
    border: 2px solid #C6B99C;
    transition: background .5s;
    font-family: Times;
}

.nav ul li a:hover {
    transition: background .5s;
    background-color: #C6B99C;
}

.nav ul li a:active {
    transition: background .5s;
    background-color: #C6B99C;
}

#btn {
    border-radius: 0;
    border: 2px solid #95747F;
    transition: background .5s;
}

#btn:hover {
    background-color: #95747F;
    transition: background .5s;
}

#btn:active {
    background-color: #95747F;
    transition: background .5s;
}

@media (max-width: 2560px) {
    .nav ul li a {
        font-size: 50px;
        width: 20px;
    }
    .nav {
        padding-bottom: 10px;
        height: 15%;
    }
}

@media (max-width: 1440px) {
    .nav ul li a {
        font-size: 20px;
        width: 15px;
    }
    .main h1 {
        font-size: 40px;
    }
    .nav {
        height: 10%;
    }
}

@media (max-width: 420px) {
    .nav {
        height: 5%;
    }
    .nav ul li {
        font-size: 14px;
    }
}

@media (max-width: 1440px) {
    .nav ul li a {
        font-size: 20px;
        width: 15px;
    }
    .main h1 {
        font-size: 40px;
    }
    .nav {
        height: 5%;
    }
}

@media(max-width: 1000px) {
    .nav {
        height: 10%;
    }
}

@media(max-width: 2560px) {
    .nav {
        height: 10%;
    }
}

@media(max-width: 420px) {
    .nav {
        height: 2%;
    }
    .nav ul li {
        font-size: 14px;
    }
}

@media(max-width: 688px) {
    iframe {
        width: 300px;
    }
    .nav ul li a {
        padding: 5px 10px;
        font-size: 15px;
        margin: 10px 10px;
    }
}
<div class="nav">
    <ul>
        <li><a href="space-page-home.html">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="space-page-blog.html" id="btn">Blog</a></li>
        <li><a href="space-page-pics.html">Space Pics</a></li>
    </ul>
</div>

Upvotes: 0

Views: 70

Answers (1)

Anmol Sandal
Anmol Sandal

Reputation: 1488

First of all never give height to the bar. Try to make it possible using padding. Regarding media queries, we have ipad resolution i.e 768 * 1024, So below ipad is all mobile. You can do the following:

@media(max-width:767px){
  Here you can define all the responsive styles for mobile view. You can resize the screen to the smallest screen resolution i.e iphone 4 320 * 480. So according to whatever the size is required, you can just define it once. It will be applicable to all the devices.
}

Upvotes: 1

Related Questions