RWD - Media Queries

Question

menu {
    z-index: 99999;
    margin: 15px 0;
    border-top: 1px solid red;
    padding: 0;
    list-style: none;
    text-align: center;
    position: sticky;
    top: 0;
    background-color: whitesmoke;
}

menu li {
    display: inline-block;
    font-size: 14pt;
}

menu li a {
    text-decoration: none;
    color: red;
    padding: 20px;
    display: block;
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    transition: ease-out .25s;
}

@media screen and (max-width: 800px) {
    menu {
        width: 100vw;
    }
}

<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="responsive.css" />

No i oczywiście tag na viewport mam, dlaczego zatem menu nie chce się rozciągnąć na full screen?

Answer 1

Może spróbuj zamienić "vw" na "%"

Comments

To samo

Answer 2

jesli menu nie jest jakis customowym tagiem to chyba powinienes odniesc sie do klasy .menu albo #menu ale lepsze pierwsze rozwiazanie.

Comments

<menu class="menu">

@media (max-width: 800px) {
.menu {
        width: 100vw !important;
    }}

Już widać chociaż to w konsoli ale still nic się nie dzieje.

Answer 3

Czemu używasz tagu menu? Jeśli to nawigacja, to powinieneś użyć nav.

Niemniej: https://codepen.io/Comandeer/pen/VVgWda – rozciąga się. Możesz pokazać więcej kodu?

Answer 4

Może spróbuj dać wszystko na box sizing: border box