Media query css works just for seconds - html

Question

I'm trying to use media queries in order to adapt image plus text to cellphone cases.
This is what I've tried and it was working properly, but not anymore:
HTML:
<section class="section">
<p id="title">Missão</p>
<div class="flex-container">
<div id="missao" class="col-3"><img src="js/missao.jpg"></div>
<div class="col-9" id="textoMissao">
<h3>Simplificar a vida nas organizações, aumentado
a criação de valor, é a nossa grande missão.</h3>
<p>Desafiar o desconhecido. Explorar possibilidades. Transpor barreiras.
Inovar. São estas as motivações que desde 1993 nos conduzem na busca
de soluções de gestão inovadoras que simplificam a vida nas organizações.</p>
<p>A paixão pela inovação na gestão empresarial está no ADN da PRIMAVERA. Um
entusiasmo contagiante que colocamos ao serviço das organizações,
disponibilizando-lhes um leque crescente de soluções de gestão que agilizam as
operações e aumenta a rentabilidade do negócio.
</p>
<p>Acreditamos na força das ideias. Auxiliamos a sua concretização. Impulsionamos
os resultados. Defendemos que com a tecnologia certa, crescer é o caminho. Do
mais pequeno micronegócio a uma grande multinacional, disponibilizamos soluções
ajustadas, ágeis e funcionais que dão mais força ao negócio.
</p>
» Conheça a nossa brochura institucional
</div>
</div>
<br><br><p class="separador"></p>
</section>
CSS:
#media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
complete css:
body{
font-family: 'Roboto';
}
.topBar {
height: 80px;
background-color: #f5f5f5;
}
img{
padding-top: 20px;;
}
.logo{
float:left;
padding-left:45px;
}
.login{
position:relative;
float:right;
color:#1da2dc;
padding-top: 30px;
padding-right: 40px;
}
.lupa{
position:absolute;
top:18px;
right: 110px;
}
.lupa:hover{
position:absolute;
top:20px;
}
.login:hover{
color:#a4a3a3;
}
.pesquisa{
position: absolute;
top:30px;
right:150px;
background: transparent;
border:none;
width:0px;
height: 30px;
transition: all 0.5s;
}
.pesquisaClick{
width:300px;
background-color: white;
outline:none;
border:1px solid #aaa;
}
.banner{
position:relative;
height:500px;
background-image: url("/js/fundoBanner.jpg");
background-repeat: no-repeat;
background-position: center;
background-position-y: 0%;
background-size: 98% 88%;
}
.pc{
float: right;
position:absolute;
right: 40px;
bottom: 40px;
height: 380px;
}
.p1{
position:absolute;
left:60px;
top:40px;
margin-top: 0px;
font-size: 48px;
font-weight: bold;
color:white;
}
.p2{
position:absolute;
top:90px;
left:60px;
font-size: 30px;
color:#ccc;
}
.p3{
position: absolute;
top:150px;
left:60px;
font-size:20px;
font-style: italic;
color: white;
}
.saberMais{
position: absolute;
top: 250px;
left:60px;
padding: 8px 20px;
color:white;
text-decoration: none;
font-weight: bold;
background-color: #f16248;
border-radius: 20px;
}
.saberMais:hover{
background-color: #c8c8c8;
color: #252525;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
.flex-container > div > p{
color:#7d7d7d;
}
h3{
color: #252525;
}
#title{
font-size: 250%;
color: #3c368c;
text-align: center;
}
section{
margin-left: 150px;
margin-right: 150px;
}
.separador{
border: 1px solid #7d7d7d;
}
#brochura{
font-size: 120%;
color: #0075be;
text-decoration: none;
font-weight: bold;
}
#textoMissao{
padding-left: 50px;
}
#brochura:hover{
text-decoration: underline;
}
.people{
margin:40px;
padding:40px;
}
.flex-container2{
display:flex;
justify-content: center;
}
.flex-container2 > div{
margin-right:15px;
margin-left: 15px;
}
.flex-container2 > div > img{
border-radius: 50%;
position: relative;
padding: 0px;
}
.flex-container2 > div > img:hover{
border-radius: 0%;
}
.titulo{
font-size: 42px;
font-weight: bold;
}
.subtitulo{
font-size: 35px;
font-weight: bold;
}
.texto{
font-size: 26px;
}
#t0{
color:#f27d29;
}
#t1{
color:#153c85;
}
#t2{
color:#ebc711;
}
#t3{
color:#153c85;
}
#t4{
color:#ff701e;
}
#s0, #txt0{
color:#153c85;
}
#media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
.carousel-caption{
top:60%;
transform: translateY(-50%);
bottom:initial;
}
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
footer{
margin-top: 50px;
padding-top: 30px;
background-color: #ebebeb;
}
.flex-container3{
display:flex;
text-align: center;
justify-content: space-around;
}
When I refresh the page, this configuration remains for 1/2 seconds (photo 1) but after that this configuration disappears (photo 2).
Photo1
Photo2
Any idea what it can be?

Answer 1

Move all the modification on #missao, .flex-container or #textoMissao which are outside of your current query inside another query for bigger screen sizes, this way they won't overwrite them.
#media only screen and (min-width: 769px){
#textoMissao{
padding-left: 50px;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
}
Complete CSS:
body{
font-family: 'Roboto';
}
.topBar {
height: 80px;
background-color: #f5f5f5;
}
img{
padding-top: 20px;;
}
.logo{
float:left;
padding-left:45px;
}
.login{
position:relative;
float:right;
color:#1da2dc;
padding-top: 30px;
padding-right: 40px;
}
.lupa{
position:absolute;
top:18px;
right: 110px;
}
.lupa:hover{
position:absolute;
top:20px;
}
.login:hover{
color:#a4a3a3;
}
.pesquisa{
position: absolute;
top:30px;
right:150px;
background: transparent;
border:none;
width:0px;
height: 30px;
transition: all 0.5s;
}
.pesquisaClick{
width:300px;
background-color: white;
outline:none;
border:1px solid #aaa;
}
.banner{
position:relative;
height:500px;
background-image: url("/js/fundoBanner.jpg");
background-repeat: no-repeat;
background-position: center;
background-position-y: 0%;
background-size: 98% 88%;
}
.pc{
float: right;
position:absolute;
right: 40px;
bottom: 40px;
height: 380px;
}
.p1{
position:absolute;
left:60px;
top:40px;
margin-top: 0px;
font-size: 48px;
font-weight: bold;
color:white;
}
.p2{
position:absolute;
top:90px;
left:60px;
font-size: 30px;
color:#ccc;
}
.p3{
position: absolute;
top:150px;
left:60px;
font-size:20px;
font-style: italic;
color: white;
}
.saberMais{
position: absolute;
top: 250px;
left:60px;
padding: 8px 20px;
color:white;
text-decoration: none;
font-weight: bold;
background-color: #f16248;
border-radius: 20px;
}
.saberMais:hover{
background-color: #c8c8c8;
color: #252525;
}
.flex-container > div > p{
color:#7d7d7d;
}
h3{
color: #252525;
}
#title{
font-size: 250%;
color: #3c368c;
text-align: center;
}
section{
margin-left: 150px;
margin-right: 150px;
}
.separador{
border: 1px solid #7d7d7d;
}
#brochura{
font-size: 120%;
color: #0075be;
text-decoration: none;
font-weight: bold;
}
#brochura:hover{
text-decoration: underline;
}
.people{
margin:40px;
padding:40px;
}
.flex-container2{
display:flex;
justify-content: center;
}
.flex-container2 > div{
margin-right:15px;
margin-left: 15px;
}
.flex-container2 > div > img{
border-radius: 50%;
position: relative;
padding: 0px;
}
.flex-container2 > div > img:hover{
border-radius: 0%;
}
.titulo{
font-size: 42px;
font-weight: bold;
}
.subtitulo{
font-size: 35px;
font-weight: bold;
}
.texto{
font-size: 26px;
}
#t0{
color:#f27d29;
}
#t1{
color:#153c85;
}
#t2{
color:#ebc711;
}
#t3{
color:#153c85;
}
#t4{
color:#ff701e;
}
#s0, #txt0{
color:#153c85;
}
#media only screen and (min-width: 769px){
#textoMissao{
padding-left: 50px;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
}
#media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
.carousel-caption{
top:60%;
transform: translateY(-50%);
bottom:initial;
}
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
footer{
margin-top: 50px;
padding-top: 30px;
background-color: #ebebeb;
}
.flex-container3{
display:flex;
text-align: center;
justify-content: space-around;
}