• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

[CSS] Media Queries problem

0 głosów
323 wizyt
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

+1 głos
odpowiedź 23 stycznia 2019 przez Comandeer Guru (607,980 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;
        }
    }
  }

 

1
 komentarz 23 stycznia 2019 przez Comandeer Guru (607,980 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

0 głosów
odpowiedź 23 stycznia 2019 przez Byczek_ Bywalec (2,570 p.)
A zaimportowałeś te media queries w headzie czy poza nim ?
 komentarz 23 stycznia 2019 przez 42savage Bywalec (2,630 p.)
No w headzie, ale ostatecznie przeniosłem do głównego pliku ze stylami
 komentarz 23 stycznia 2019 przez Byczek_ Bywalec (2,570 p.)
A pokaż jeszcze html'a

Podobne pytania

0 głosów
0 odpowiedzi 201 wizyt
[CSS] Media queries Chrome i Firefox różnica dla 1px
pytanie zadane 4 grudnia 2019 w HTML i CSS przez jared Gaduła (3,600 p.)
0 głosów
1 odpowiedź 672 wizyt
Jak zbudować responsywne style css media queries
pytanie zadane 17 grudnia 2017 w HTML i CSS przez stasiek_retro Nowicjusz (140 p.)
0 głosów
2 odpowiedzi 588 wizyt
Zagnieżdżanie media queries CSS
pytanie zadane 5 grudnia 2017 w HTML i CSS przez szymonq Użytkownik (770 p.)

93,695 zapytań

142,612 odpowiedzi

323,223 komentarzy

63,225 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...