CODEWITHSUNDEEP
csstwitter-bootstrapgoogle-chrome
Mehmet Uyarovic
Mehmet Uyarovic

Reputation: 314

Media Screen Queries For Chrome Webkit

Everything works fine on my site except chrome padding issues, I don't know if there is general padding fix issue for chrome users or if we could do @media queries specified on chrome browsers.My main problem my menu.

I tried to use both webkit and screen query same time but when I added (min-width : 992px), it doesn't work, it works but 1200px query doesn't work on chrome 992px query overlays everything for Chrome.

I searched a little bit and found some Dpi based queries but my problem isnot retina just normal problems.

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

    .logoz{

        width:100%;

    }

    .navbar-default .navbar-nav > li > a {
        color: #615f5f;
        font-size: 16px;
        padding: 10px 23px 10px 23px;
        margin:0 5px 0 5px;
        font-family: 'Armata', sans-serif;
    }

    .navbar-nav{
        margin-top:59px;
    }


    .text_boxes{
        background-color: #3f3f40;
        height:40px;
        padding:5px;
        color:#FFFFFF;
        font-size:24px;
        margin-top:20px;
    }

    .text_main{
        margin-top: 10px;
        padding:5px;
        font-size:12px;
    }

}




/* Chrome , Wide Screens */
@media only screen and (-webkit-min-device-pixel-ratio:0) and (min-width : 1200px) {

    .logoz{

        width:100%;

    }

.navbar-default .navbar-nav > li > a {
    color: #615f5f;
    font-size: 16px;
    padding: 10px 20px 10px 20px;
    margin:0 6px 0 6px;
    font-family: 'Armata', sans-serif;
}


}



@media only screen and (-webkit-min-device-pixel-ratio:0) and (min-width : 992px) {


    .logoz{

        width:80%;

    }
    .navbar-default .navbar-nav > li > a {
        color: #615f5f;
        font-size: 14px;
        padding: 8px 10px 8px 10px;
        margin:0 5px 0 5px;
    }




}

Upvotes: 0

Views: 330

Answers (1)

Mehmet Uyarovic
Mehmet Uyarovic

Reputation: 314

I found my problem, I have to run min-with 1200px at last line because otherwise min-width queries mistaken resolution.

Regards

Upvotes: 1

Related Questions