CODEWITHSUNDEEP
htmlcss
Vikas Ghodke
Vikas Ghodke

Reputation: 6655

Max-Width not rendering in Safari

Please check this fiddle

This is how its look in Firefox and Chrome.. which is my original layout.

enter image description here

And this its how it looks in Safari, which i want to solve. Any Help would be appreciated.

enter image description here

.top {
    background: #edebe6;
    height: 80px;
}
.intop {

    max-width: 1080px;
    margin: 0 auto;
    display: table;
    width: 100%;
}
.logo {
    width: 20%;
    float: left;

}
.logo img {
    display: table-cell;
    vertical-align: middle;
    margin-top: 15px;
}
.svg-menu {
    display: none;
}
.nav-wrap {
    width: 68%;
    float: left;
    height: 80px;
    display: table;
}
ul.nav {
    list-style: none;
    float: right;
    margin-top: 23px;
    margin-right: 45px;

}
ul.nav li {
    display: inline-block;
    margin-left: 35px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}
ul.nav li a {
    color: #403b33;
}
ul.nav li a:hover {
    background: none;
    color: #d3643b;
}

ul.nav li.current-menu-item a {
    color: #d3643b;
    position: relative;
}
ul.nav li a::after {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    width: 60%;
    height: 1px;
    background: #d3643b;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
}
ul.nav li a:hover::after,
ul.nav li a:focus::after {
    height: 2px;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px);
}
ul.nav li.current-menu-item a:after {
    content: '';
    height: 2px;
    width: 60%;
    background: #d3643b;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.top-cart {
    width: 12%;
    float: left;
    height: 80px;
    display: table;
    text-align: right;
    padding-right: 18px;
    background: #83b4a4 url(images/cart.png) no-repeat 20px center;
}
.top-cart a {
    vertical-align: middle;
    display: table-cell;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
}


@media only screen and (max-width: 1080px) {
    .in-fea-home, #container, .logo {
        padding-left: 20px;
        padding-right: 20px;
    }    
    .top-cart {
        width: 65px;
        float: right;
        position: absolute;
        right: 0;
        padding: 0;
    }
    .top-cart a {
        margin-right: -25px;
        padding-right: 27px;
        padding-top: 14px;
    }.rhide {

        display: none;
    }
}
@media only screen and (max-width: 767px) {

    .nav-wrap {

        display: none;
    }

    .logo {
        width: 100%;
        text-align: center;
    }

    .svg-menu {
        display: block;
        width: 20%;
        float: left;
        position: absolute;
        left: 15px;
        padding-top: 27px;
    }
    .footer {

        text-align: center;
    }
    #container ul.products li {
    width: 70%;
    margin: 0 auto;
}
.ff, .gff {
    margin-bottom: 55px;
}
}

@media only screen and (max-width: 534px) {


}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
   button.single_add_to_cart_button {
    background: #83b4a4;
    border: none;
    border-radius: 3px;
    padding: 10px 17px;
    padding-bottom: 9px;
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    margin-left: 15px;
    font-weight: bold;
    display: block;
    float: left;
    margin-left: -120px;
    margin-top: 50px;
}

}

Upvotes: 5

Views: 1607

Answers (1)

Abhay Kumar
Abhay Kumar

Reputation: 1618

remove display: table-cell from .logo img and that should fix all of your problems on all the browsers.

Upvotes: 4

Related Questions