Co jest nie tak?

Question

Witam!

Więc wziąłem się za media queries w moim layoucie i mam problem bo wszystko jest ok tylko problem z menu bo jest przypięte (porusza się wraz z suwakiem) i po zmniejszeniu ekranu nic nie działa zostają tylko dwie zakładki a reszta znika i nie wiem co zrobić trochę się denerwuję więc przychodzę do was i prosiłbym jeszcze o pomoc bo może jednak lepiej zrobić takie menu jak jest tutaj po zmniejszeniu strony ale jak się do tego zabrać?

Kod do menu:

<!-- Menu Main !-->
    <nav id="main">
        <ul>
            <li><a href="portfolio1code.html" class="active">HOME</a></li>
            <li><a href="#aboutme">ABOUT ME</a></li>
            <li><a href="#skills">TECHNOLOGIES I USE</a></li>
            <li><a href="#education">EDUCATION</a></li>
            <li><a href="#photo-portfolio">PORTFOLIO</a></li>
            <li><a href="#text-contact">CONTACT</a></li>
        </ul>
    </nav>

#main {
    position: fixed;
    top: 0;
    left: 0;
    width: 1349px;
}

#main ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
}

#main li {
    float: left;
}

#main li a {
    letter-spacing: 0px;
    width: auto;
    display: block;
    color: #585c63;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-right: 5px;
    padding-left: 100px;
    margin: auto;
    text-decoration: none;
}

/*SCREEN SIZE FROM 280PX TO 450PX*/
@media (min-width: 280px) and (max-width: 450px) {
	.main {width: 100; font-size:10px;}
}

Dzięki za zajęty czas!

 

Answer 1

W elemencie media podajesz klasę main, a w kodzie masz main jako identyfikator. Dodatkowo nie dałeś jednostki przy width.
Przy okazji w necie jest sporo poradników, jak się tworzy responsywne menu, proponuję poszukać i poczytać o RWD a konkretnie tutaj o rozdzielczości różnych urządzeń bo max-width: 450px to jest stanowczo za mało. No chyba, że masz jeszcze inne opcje.

Comments

I dzięki za pomoc z resztą już dam sobie rade! Czasem potrzebuję żeby ktoś mną potrząsnął i nakierował. Jeszcze raz dziękuję!

---

Dokładnie, po co pisać coś, co już ktoś napisał. Pamiętaj tylko o prawach autorskich, być może autor nie życzy sobie, aby ktoś wykorzystywał jego kod lub przerabiał po swojemu i umieszczał na stronie.

---

Ale to co wysłałem przed chwilą mogę chyba użyć prawda?

---

I wracając używając coś w tym stylu (https://blog.devolk.pl/responsywne-menu-3-sprawdzone-rozwiazania/) to chyba można tego używać ponieważ są to poradniki na blogu tak? Czy muszę pisać do autora czy na jakiej zasadzie to działa bo wsumie oni udostępniają kod na stronie

---

Myślę, że tak.

Answer 2

Nie zmienia się bo masz na sztywno przypisane do #main width: 1349px;

Używaj % lub innych jednostek jak vw zamiast px.

Comments

a zamiast % mogę dać auto?

---

To nie ma wpływu na szerokość menu w urządzeniach mobilnych, bo w media queries ta szerokość jest zmieniana.
Edit: Niemniej staraj się używać innych jednostek niż wpisywać na sztywno px.