CSS shows only part of the elements of a DIV

Asked

Viewed 21 times

1

I have the following CSS:

@charset "utf-8";
/* CSS Document */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
    font-family: 'Open Sans';
    margin: 0;
    padding: 0;
    border: none;
    outline: 0; 
    box-sizing: content-box;
}
body {
    width: 100vw;
    background-color:#f9f9f9;
    overflow-x:hidden;
    margin:0 auto;
}
a {
    text-decoration:none;
}
img {
    border: 0;
    max-width: 100%;
}
ul {
    list-style: none;
}
ul li {
}
div.cabecalho {
    position: relative;
    width:100%;
    text-align:center;
}
div.cabecalho > div {
    position:relative;
    display:inline-block;
    vertical-align:middle;
}
div.cabecalho div img{
    vertical-align:middle; 
}
div.cabecalho div.logo {
    width:42%;
}
div.cabecalho div.menu {
    display:none;
}
div.cabecalho div.redes {
    width:57%;
}
div.cabecalho div.redes div {
    display:inline-block;
    width:32%;
}
div.cabecalho div.logo img {
    -webkit-animation : logo-anim 1s;
    -moz-animation : logo-anim 1s;
    -o-animation : logo-anim 1s;
    animation : logo-anim 1s;
    vertical-align:middle;
}
 @-webkit-keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}
 @-moz-keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}
 @-o-keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}
 @keyframes logo-anim {
 0% {
 opacity : 0;
 transform : translateY(-50px);
 -webkit-transform : translateY(-50px);
 -moz-transform : translateY(-50px);
 -o-transform : translateY(-50px);
 -ms-transform : translateY(-50px);
}
 100% {
 opacity : 1;
 transform : translateY(0px);
 -webkit-transform : translateY(0px);
 -moz-transform : translateY(0px);
 -o-transform : translateY(0px);
 -ms-transform : translateY(0px);
}
}

div.menu {
    width:100%;
    height:70px;
}
div.menu ul.menu {
    width:100%;
    height:100%;
    color:rgb(255,255,255);
    background-color: rgb(36,81,60);
}
div.menu ul.menu li {
    width:16.5%;
    float:left;
    cursor:pointer;
    text-align:center;
}
div.menu ul.menu li:hover {
    background-color: rgb(25,57,42);      
}
div.menu ul.menu li a{
    width:100%;
    line-height:70px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size:1.7vw;
    color:rgb(255,255,255);
}
div.banner {
}

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

    div.cabecalho > div {
        width:100% !important;
    }

}

@media screen and (max-width:320px)  {  
    div.menu, 
    div.banner {
        display:none;
    }

    div.cabecalho > div {
        display:inline-block;
        vertical-align:middle;
    }

    div.cabecalho div.redes {
        display:none;
    }
    div.cabecalho > div.logo {
        width:72%;
    }
    div.cabecalho div.redes2 {
        width:12%;
    }   
    div.cabecalho div.redes2 > div{
        display:block;
    }

    div.cabecalho div.redes2 > div img{
        width:50%;
    }

    div.cabecalho > div.menu {
        width:12%;
        height:100%;
        vertical-align:middle;
    }


}

When I reduce the resolution to less than 320px, some problems occur:

1) although I do the Media Query below:

@media screen and (max-width:320px)  {  
    div.menu, 
    div.banner {
        display:none;
    }

    div.cabecalho > div {
        display:inline-block;
        vertical-align:middle;
    }

    div.cabecalho div.redes {
        display:none;
    }
    div.cabecalho > div.logo {
        width:72%;
    }
    div.cabecalho div.redes2 {
        width:12%;
    }   
    div.cabecalho div.redes2 > div{
        display:block;
    }

    div.cabecalho div.redes2 > div img{
        width:50%;
    }

    div.cabecalho > div.menu {
        width:12%;
        height:100%;
        vertical-align:middle;
    }


}

only the div.cabecalho > div.logo is shown on the screen, and yet with 100% and not with the 72% declared.

The 2 others blocks, div.redes2 and div.menu of div.cabecalho are not being shown but seem to be occupying the place. Much like opacity:0

Where am I going wrong?

In time: no errors or warnings in the debugger!

CAN BE VIEWED ON http://funerariasaopedro.net.br/novo

css css3

  • Your example link is missing in php. You can check?

  • sorry was it was still going up the update to ftp. Can give F5 ai

  • Carlos why do you want a resolution lower than 320px? Does your website need to be displayed on an Apple Watch or some other smart watch? 320px is already the minimum, qq screen smaller than this will probably be some old device in which the Browser will also be old and should not support half of your CSS, I particularly would not worry about screens smaller than 320px...

  • example: I have a Sony Xperia E, small, 320px; but that’s not the problem. I need to know where the mistake is in order not to make it again. Understand?

1 answer

1


Try using the CSS below. I believe the problem is only in the order you call the css or Styles defined in the element itself, so you will need to use !important in some properties:

@media screen and (max-width:320px)  {  
div.menu, 
div.banner {
    display:none;
}

div.cabecalho > div {
    display:inline-block!important;
    vertical-align:middle;
}

div.cabecalho div.redes {
    display:none!important;
}
div.cabecalho > div.logo {
    width:72%!important;
}
div.cabecalho div.redes2 {
    width:12%!important;
}   
div.cabecalho div.redes2 > div{
    display:block;
}

div.cabecalho div.redes2 > div img{
    width:50%;
}

div.cabecalho > div.menu {
    width:12%;
    height:100%;
    vertical-align:middle;
}

}

  • kkk, you won’t believe this: My code was exactly the same as the one you posted. But I removed the ! Import to elaborate the question. The same error (failed) that I made you also made. the div.cabecalho > div.menu { width:12%; element is also valuable from ! Otherwise it DOES NOT align with the other elements. But still your answer helped me discover the flaw. I will accept it!

  • Hahaha boaa. Vlw

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.