Basically I need to re-style a button that is inside a box in a 950px media screen. I can change everything minus that button. As you will see in the code below, when i change something in the button with @media screen and (min-width:950px) , nothing happens, I've tryied a lot of things and I noticed that if I change the style in the media screen with 350px it works, but with the 950px it does not! If someone knows what I'm doing wrong please tell me. Thank you and have a good day.
/*Mobile M*/ /*Default (not the one I want to change)*/
@media screen and (min-width: 350px){
body{
background-color: rgb(247, 247, 247)
}
main{
padding-top: 110px;
}
/*Livros*/
div.livros {
display:grid;
grid-template: repeat(1, 1fr) / repeat(1,1fr);
}
div.livros h2{
margin-top: 30px;
margin-bottom: 5px;
padding: 20px 30px 0px 30px;
}
div.livros div.box{
border: 1px solid rgba(94, 94, 94, 0.1);
margin: 10px 40px 10px 40px;
background-color: rgba(145, 145, 145, 0.1);
}
div.livros div.box img{
display:block;
width: 83%;
margin: 25px auto 5px auto;
}
div.livros div.box h3{
font-family: "Asap", "Source Sans Pro", sans-serif;
font-size: 17px;
letter-spacing: 1px;
padding-left: 26px;
padding-right: 50px;
padding-top: 12px;
}
div.livros div.box p.autores{
padding: 10px 0px 10px 26px;
font-size: 15px;
font-family: "Source Sans Pro", sans-serif;
color: rgb(46, 46, 46);
}
div.livros div.box p.autores a{
font-size: 14px;
margin-left: 18px;
color: rgb(218, 199, 31);
padding: 2px 10px;
border-radius: 3px;
background-color: rgba(138, 138, 138, 0.1);
font-family: "Baloo Tamma 2","Source Sans Pro", sans-serif;
}
div.livros div.box#livro2 p.autores a{
margin-left: 1px;
}
div.livros div.box p.autores a:hover{
color: rgb(156, 132, 23);
transition: color 0.2s ease-in 0s;
}
div.livros div.box p.autores a:not(:hover){
color: rgb(221, 191, 94);
transition: color 0.2s ease-in 0s;
}
div.livros div.box p.descrições{
margin: 14px 0px 10px 26px;
font-size: 15px;
font-family: "Source Sans Pro", sans-serif;
color: rgb(46, 46, 46);
}
/*Button*/
div.livros div.box button.verMais{
width: 86%;
background-color: rgb(228, 180, 78);
color: rgb(255, 255, 255);
border: none;
outline: none;
font-family: "Quicksand", "Source Sans Pro", sans-serif;
font-size: 18px;
padding: 4px 8px;
display: block;
margin: 40px auto 10px auto;
cursor: pointer;
}
div.livros div.box button.verMais:hover{
background-color: rgb(167, 127, 43);
transition: background-color 200ms ease-in 0s ;
}
div.livros div.box button.verMais:not(:hover){
background-color: rgb(228, 180, 78);
transition: background-color 200ms ease-in 0s ;
}
div.livros div.box a.compre{
width: 80.5%;
background-color: rgb(228, 180, 78);
color: rgb(255, 255, 255);
outline: none;
font-family: "Quicksand", "Source Sans Pro", sans-serif;
font-size: 18px;
padding: 5px 8px;
display: block;
margin: 5px auto 10px auto;
cursor: pointer;
text-align: center;
}
div.livros div.box a.compre:hover{
background-color: rgb(167, 127, 43);
color: rgb(255, 255, 255);
transition: background-color 200ms ease-in 0s,
color 200ms ease-in 0s;
}
div.livros div.box a.compre:not(:hover){
background-color: none;
transition: background-color 200ms ease-in 0s;
}
}
/*The media I want to edit!*/
@media screen and (min-width: 950px){
/*Livros*/
div.livros div.wrapper{
display:grid;
grid-template: repeat(1, 1fr) / repeat(2,1fr);
column-gap: 10px;
}
div.livros h2{
margin-top: 0px;
margin-bottom: 5px;
padding: 20px 30px 0px 30px;
margin-left: 50px;
}
div.livros div.box{
border: 1px solid rgba(94, 94, 94, 0.1);
margin: 10px 10px 10px 10px;
background-color: rgba(145, 145, 145, 0.1);
}
div.livros div.box img{
display:block;
width: 180px;
margin: 0;
}
div.livros div.wrapper div.box#livro4 img{
width: 180px;
height: initial;
}
div.livros div.wrapper div.box#livro6 img{
width: 180px;
height: initial;
}
div.livros div.box#livro4 img{
display:block;
width: 180px;
margin: 0;
}
div.livros div.box div.img{
width: 0px;
height: 0px;
position: absolute;
}
div.livros div.box h3{
font-family: "Asap", "Source Sans Pro", sans-serif;
font-size: 18px;
letter-spacing: 1px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
margin-left: 176px;
}
div.livros div.box p.autores{
padding: 10px 0px 10px 197px;
font-size: 14px;
font-family: "Source Sans Pro", sans-serif;
color: rgb(46, 46, 46);
}
div.livros div.box p.autores a{
font-size: 13px;
margin-left: 10px;
color: rgb(218, 199, 31);
padding: 2px 10px;
border-radius: 3px;
background-color: rgba(138, 138, 138, 0.1);
font-family: "Baloo Tamma 2","Source Sans Pro", sans-serif;
}
div.livros div.box#livro2 p.autores a{
margin-left: 1px;
}
div.livros div.box p.autores a:hover{
color: rgb(156, 132, 23);
transition: color 0.2s ease-in 0s;
}
div.livros div.box p.autores a:not(:hover){
color: rgb(221, 191, 94);
transition: color 0.2s ease-in 0s;
}
div.livros div.box p.descrições{
margin: 14px 0px 10px 198px;
font-size: 14px;
font-family: "Source Sans Pro", sans-serif;
color: rgb(46, 46, 46);
}
/*Button*/ /*SEE THE BUTTON HERE! (VERMAIS)*/
div.livros div.box button.verMais{
width: 26%;
background-color: rgb(255, 255, 255);
color: rgb(53, 16, 16);
border: none;
outline: none;
font-family: "Quicksand", "Source Sans Pro", sans-serif;
font-size: 112px;
padding: 4px 8px;
display: block;
margin: 40px auto 10px auto;
cursor: pointer;
/*As you amy see none of these random changes worked on the button*/
}
div.livros div.box a.compre{
width: 200px;
background-color: rgb(228, 180, 78);
color: rgb(255, 255, 255);
outline: none;
font-family: "Quicksand", "Source Sans Pro", sans-serif;
font-size: 18px;
padding: 5px 8px;
display: block;
margin: 5px 0px 10px 200px;
cursor: pointer;
text-align: center;
}
} <div class="livros">
<h2><span>LIVROS</span> QUE A <span>CARLA</span> RECOMENDA</h2>
<div class="wrapper">
<div class="box" id="livro1">
<div class="img">
<img src="Capas/capaLivro1.jpg"/>
</div>
<h3>O PODER ESTÁ DENTRO DE SI</h3>
<p class="autores">de Louise Hay
<a href="#">Auto Ajuda</a>
</p>
<div class="p">
<p class="descrições">
«Não sou uma curandeira. Não curo ninguém. Vejo-me a mim própria como
um passo no caminho da autodescoberta...»
</p>
</div>
<button class="verMais" id="botão1" type="button">Ver Mais</button>
<a class="compre" href="https://www.bertrand.pt/livro/o-poder-esta-dentro-de-si-louise-l-hay/15448870" target="_blank">Compre na Bertrand</a>
</div>