[CSS] Media Queries problem

pytanie zadane 23 stycznia 2019 w HTML i CSS przez 42savage Bywalec (2,630 p.)

Cześć i czołem tym razem mam problem z media queries, mianowicie warunki działają głównie przy dodaniu na końcu !important.

Gdzieś na internecie wyczytałem, żeby zaimportować owe media queries na końcu <head>, to nic nie dało, nawet spróbowałem dodać te reguły na koniec głównego pliku css i to również nic nie zmieniło.

Jakieś pomysły jak sobie z tym poradzić?

(Wydaje mi się, że kod jest zbędny; nie mam nigdzie w css warunku inline)

2 odpowiedzi

odpowiedź 23 stycznia 2019 przez Comandeer Guru (601,550 p.)
wybrane 23 stycznia 2019 przez 42savage

Najlepsza

Kod nie jest zbędny, bo na to, jaki styl zostanie ostatecznie zastosowany, ma wpływ wiele czynników. Jakbym miał strzelać, to masz problemy ze specyficznością selektorów.

komentarz 23 stycznia 2019 przez 42savage Bywalec (2,630 p.)

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oxygen', sans-serif;
}
    #sechamBtn{
        background: none;
        box-shadow: none;
        border: none;
        margin-right: 20px;
        cursor: pointer;
        .ham1{
            background: white;
            width: 30px;
            height: 4px;
            border-radius: 50px;
            transform: rotate(45deg) translate(3px, 2px);
        }
        .ham2{
            background: white;
            width: 30px;
            height: 4px;
            border-radius: 50px;
            transform: rotate(-45deg);
        }
}
.header{
    width: 100%;
    height: 568px;
    background: url('../img/header-background.jpg');
    background-position: center;
    background-size: cover;
    background-repeat:  no-repeat;
    .slider{
        width: 100%;
        height: 568px;
        position: absolute;
        top: 0;
        .si1{
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            color: white;
            h2{
                background: rgba(0, 0, 0, 0.582);
                padding: 5px 15px;
            }
        }
        .slider-image1{
            width: 100%;
            height: 568px;
            background: url('../images/slider-image.jpg');
            background-position: center;
            background-size: cover;
            justify-content: flex-start;
            align-items: flex-end;
        }
        .slider-image2{
            width: 100%;
            height: 568px;
            background: url('../images/slider-image2.jpg');
            background-position: center;
            background-size: cover;
        }
        .slider-image3{
            width: 100%;
            height: 568px;
            background: url('../images/slider-image3.jpg');
            background-position: center;
            background-size: cover;
            justify-content: center;
            align-items: center;
        }
    }
        .nav-container{
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 999;
            .active{
                display: block !important;
            }
            .main-nav{
                width: 100%;
                position: absolute;
                top: 0;
                display: none;
                .active-logo{
                    color: white;
                    position: absolute;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-top: 20px;
                    font-size: 22px;
                    a{
                        margin-left: 20px;
                        font-size: 22px;
                        color: white;
                    }
                    a:visited{
                        color: white;
                    }
                    a:link{
                        color: white;
                    }
                }
                .active-facebook{
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    text-align: center;
                    margin-bottom: 20px;

                    a{
                    text-decoration: none;
                    color: white;
                    }   
                }
                ul{
                    width: 100%;
                    height: 1200px;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    background: url('../img/nav-background.jpg');
                    background-position: center;
                    background-size: cover;
                    padding-top: 250px;
                    li{
                        list-style-type: none;
                        padding: 10px 0;
                        border-bottom: 2px solid silver;
                        width: 80%;
                        margin: 5px 0;
                        text-align: center;
                        font-size: 18px;
                        a{
                            text-decoration: none;
                            color: white;
                        }
                        a:visited{
                            color: white;
                        }
                        a:link{
                            color: white;
                        }
                    }
                }
            }
            }
                .logo{
                    margin-left: 20px;
                    color: white;
                    font-size: 22px;
                }
                .hamburger-menu{
                    button{
                        background: none;
                        box-shadow: none;
                        border: none;
                        margin-right: 20px;
                        cursor: pointer;
                        div{
                            background: white;
                            width: 36px;
                            height: 4px;
                            margin: 3px;
                            border-radius: 50px;
                        }
                    }
                }
}
.content{
    padding: 60px 0;
    text-align: center;
    h2{
        position: relative;
        display: flex;
        justify-content: center;
    }
    h2::before{
        content: '';
        position: absolute;
        width: 120px;
        height: 5px;
        border-radius: 20px;
        background: crimson;
        bottom: -20px;
    }
    .content-boxes{
        margin: 30px 0;
        display: flex;
        padding: 100px 0;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .content-img{
            margin: 10px 0;
        }
        .content-box{
            margin: 10px;
            width: 250px;
            height: 250px;
            .content-text{
                padding: 10px;
                p{
                    text-align: left;
                }
            }
        }
        }
}
.img-g-text{
    width: 100%;
    text-align: center;
    margin: 20px 0 40px;
    h2{
        display: flex;
        justify-content: center;
        position: relative;
    }
    h2::after{
        content: '';
        width: 120px;
        height: 6px;
        background: crimson;
        border-radius: 20px;
        position: absolute;
        bottom: -20px;
    }
}
.footer{
    background: #112233;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 250px;
    color: white;
    margin-top: 60px;
}
.slick-next{
    top: 288px !important;
    right: 20px!important;
}
.slick-prev{
    top: 288px !important;
    left: 20px !important;
    z-index: 555;
}
.filmik{
    h2{
        margin: 40px 20px 60px 20px;
        position: relative;
        display: flex;
        justify-content: center;
    }
    h2::after{
        content: '';
        position: absolute;
        bottom: -20px;
        border-radius: 20px;
        width: 120px;
        height: 6px;
        background: crimson;
    }
}
.image-gallery{
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .imgg{
        width: 300px;
        height: 200px;
        border-radius: 10px;
        margin: 25px;
        background-position: center !important;
        background-size: cover !important;
        cursor: pointer;
    }
    .img1{
        background: url('../img/imgG1.jpg');
    }
    .img2{
        background: url('../img/imgG2.jpg');
    }
    .img3{
        background: url('../img/imgG3.jpg');
    }
    .img4{
        background: url('../img/imgG4.jpg');
    }
    .img5{
        background: url('../img/imgG5.jpg');
    }
    .img6{
        background: url('../img/imgG6.jpg');
    }
}
.image-gallery-more{
    width: 100%;
    display: flex;
    justify-content: center;
    a{
        border-radius: 5px;
        border: 2px solid black;
        padding: 5px 20px;
        color: black;
        text-decoration: none;
        transition: ease;
        transition-duration: .25s;
    }
    a:hover{
        background: black;
        color: white;
        
    }
}
.hide{
    opacity:0;
}

.show {
	opacity: 1;
}
@media only screen and (min-width: 420px) {
    .logo{
        margin: 30px 0 0 60px !important;
    }
    #hamBtn{
        margin: 30px 60px 0 0 !important;;
     }
}
@media only screen and (min-width: 900px) {
    .logo{
        margin: 30px 0 0 60px !important;
    }
    #hamBtn{
       display: none;
    }
    .main-nav{
        display: block !important;
        flex-direction: row !important;
        ul{
            display: flex !important;
            padding: 0 20px 0 0 !important;
            justify-content: flex-end !important;
            align-items: flex-start !important;
            flex-direction: row !important;
            width: auto !important;
            height: auto !important;
            background: none !important; 
            border-bottom: 0.5px solid rgba(190, 187, 187, 0.527);
            padding-bottom: 20px !important;
            li{
                width: 150px !important;
                border-bottom: none !important;
                margin: 20px 0px 0 0 !important;
                a{
                    color: white !important;
                }
                a:link{
                    color: white !important;
                }
                a:visited{
                    color: white !important;
                }
            }
        }
        .active-facebook{
            display: none !important;
        }
        .active-logo{
            display: none !important;
        }
    }
  }

komentarz 23 stycznia 2019 przez Comandeer Guru (601,550 p.)

Tak jak mówiłem: to wygląda jak problemy ze specyficznością. Zagnieżdżając bloki w SCSS, tworzysz niepotrzebnie specyficzne selektory, jak .header .nav-container .main-nav ul li a. A ten selektor powinien wyglądać tak: .nav-link, względnie .main-nav a. Do tego używasz [id] do stylowania, co dodatkowo podbija specyficzność selektorów.

Weźmy ten link w menu, bo w media query masz raptem selektor .main-nav ul li a. Jeśli policzymy specyficzność dla tego selektora, to otrzymamy [0 1 3]. Z kolei główna regułka ma specyficzność [0 3 3], czyli wyższą. Z tego też względu podstawowa reguła wygrywa.

Dlatego w CSS-ie powinno utrzymywać się jak najniższą, płaską specyficzność (czyli taką samą dla wszystkich reguł), najlepiej po prostu stylując wszystko po klasach. No i zagnieżdżanie w SCSS to wróg. Nie dość, że tworzy tego typu selektory, to dodatkowo sprawia, że kod jest mniej czytelny.

Więcej info: https://kot-zrodlowy.pl/goscinne/programowanie/2017/09/11/najczeste-bledy-poczatkujacych-i-nie-tylko-webdeveloperow.html#stylowanie-po-id