CSS shows only part of the elements of a DIV

Question

CSS shows only part of the elements of a DIV

Navigation

#1 by (1 votes)

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, there are some problems:

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 div.cabecalho > div.logo is shown on the screen, and yet with 100% and not declared 72% .

The 2 other blocks , div.redes2 , and div.menu of div.cabecalho are not being displayed but they seem to be taking the place. Much like opacity:0

Where am I going wrong?

On time: no errors or warnings in the debugger!

CAN BE VIEWED link

css css3

asked by anonymous 14.05.2018 / 15:04

1 answer

Update record in table using selected in MYSQL Validate date field with javascript

score 1 · Accepted Answer

Try using the CSS below. I believe the problem is only in the order that you call the css or styles defined in the element itself, so you will need to use !important on 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;
}

}