HTML5/CSS3 - Can't change font-size on #media - html

Question

The code is kind big but considering I don't know where the problem is I'll paste all my HTML5 file and CSS3 stylesheet in here.
I've started work with web designing now and I'm just reworking my first website in order to make it be responsive.
I know that when rules are the same, it makes count the last one and it's not always a good pratice to keep it repeating itself but in my case the rules isn't exactly the same, I'm using different classes ("caixa" means "box", and I made different ones for different ocasions, at least it's I believe I'm doing. In this case, I can't change the font-size when coding the #media(max-width: 480px)) in each situation and no matter how I try it...I mean, I even tried to make new classes just to change it but it JUST DON'T RECOGNIZE. I'm getting nuts here guys. What I'm doing wrong?
"Sorry" for portugues classes and yes I mix it with english words, habits, any doubt just ask... oh, and "sorry" for bad english of course, I'M FREAKING NUTS HERE DAMN WANNA EXPLODE EVERYTHING WITH A F*CKING BAZOOKA !!!
My HTML5 file (the part that I wanna mess with):
<!-- REVISTA START -->
<section class="posts-section">
<section class="container-small">
<!-- maria trindade -->
<section id="maria-trindade" class="caixa-destaque">
<div class="title">
<a href="revista\artistas\maria-trindade.html">
<h2>VER DE PERTO</h2>
</a>
</div>
<div class="img">
<a href="revista\artistas\maria-trindade.html">
<img src="_img/posts/maria-trindade/ver-de-perto/3.png" alt="">
</a>
</div>
<div class="author">
<a href="revista\artistas\maria-trindade.html">
<h4>Maria Trindade</h4>
</a>
</div>
<div class="continue-btn">
<a href="revista\artistas\maria-trindade.html">
<h5>CONTINUAR A LEITURA</h5>
</a>
</div>
</section>
<!-- bru pereira -->
<section id="bru-pereira" class="caixa-destaque">
<div class="title title-small">
<a href="revista\artistas\bru-pereira.html">
<h2>Pacto</h2>
</a>
</div>
<div class="text">
<a href="revista\artistas\bru-pereira.html">
<p>Muito me anima compor parte de um novo corpo, fazer corpo é uma arte, uma artesania que aprecio cada vez mais. Me instigo a pensar a partir desse lugar de entrelaçamento entre o somático e o coletivo, a partir desse corpo que fazemos sempre
juntas e juntos. (...)</p>
</a>
</div>
<div class="author">
<a href="revista\artistas\bru-pereira.html">
<h4>Bru Pereira</h4>
</a>
</div>
<div class="continue-btn">
<a href="revista\artistas\bru-pereira.html">
<h5>CONTINUAR A LEITURA</h5>
</a>
</div>
</section>
<!-- carol do vale -->
<section id="carol-do-vale" class="caixa-destaque">
<div class="title">
<a href="revista\artistas\carol-do-vale.html">
<h2>O meu corpo é um templo: Eu respeito, eu curo, eu liberto</h2>
</a>
</div>
<div class="text">
<a href="revista\artistas\carol-do-vale.html">
<p>É pessoalmente difícil escrever sobre algo tão íntimo como mera observadora. A trajetória dos corpos não-brancos diante de um sistema que esmaga a autoestima deve ser sempre narrada em primeira pessoa. Precisamos nos tornar protagonistas e
não meros coadjuvantes em nossa própria história. (...)</p>
</a>
</div>
<div class="author">
<a href="revista\artistas\carol-do-vale.html">
<h4>Carol do Vale</h4>
</a>
</div>
<div class="continue-btn">
<a href="revista\artistas\carol-do-vale.html">
<h5>CONTINUAR A LEITURA</h5>
</a>
</div>
</section>
<!-- bruna gomes -->
<section id="bruna-gomes" class="caixa-destaque proxima-fila">
<div class="title">
<h2>CALO NA MÃO</h2>
</div>
<div class="img">
<a href="revista\artistas\bruna-gomes.html">
<img src="_img/posts/bruna-gomes-afonso/IMAGENS/2.png" alt="">
</a>
</div>
<div class="text text-fix">
<a href="revista\artistas\bruna-gomes.html">
<p>O Projeto Calo na Mão traz como característica a brincadeira, no sentido de brincar a cultura popular, de brincar o maracatu, onde Corpo e Espaço estabelecem relações baseadas na vivência. (...)</p>
</a>
</div>
<div class="author">
<a href="revista\artistas\bruna-gomes.html">
<h4>Bruna Gomes Afonso</h4>
</a>
</div>
<div class="continue-btn">
<h5>CONTINUAR A LEITURA</h5>
</div>
</section>
<!-- bruna diniz -->
<section id="bruna-diniz" class="caixa proxima-fila">
<div class="text text-big poesia">
<a href="revista\artistas\bruna-diniz.html">
<p>corpo estrangeiro sem imagem<br>
um espelho vazio que não sou capaz de ver e já não sei se um dia verei<br>
se quer serei capaz de pintar algum rosto que imagino ser o meu<br>
qualquer imagem que nos dissesse sobre aquele fio de navalha<br>
pelo qual percorri e ainda percorrerei<br>
imagine só o que serão nossos filhos<br>
nossas filhas<br>
que ainda não são frutos<br>
e se forem algum, de quais flores irão nascer? (...)</p>
</a>
</div>
<div class="author">
<a href="revista\artistas\bruna-diniz.html">
<h4>Bruna Diniz</h4>
</a>
</div>
<div class="continue-btn">
<a href="revista\artistas\bruna-diniz.html">
<h5>CONTINUAR A LEITURA</h5>
</a>
</div>
</section>
<!-- bruno caldeira -->
<section id="bruno-caldeira" class="caixa proxima-fila">
<div class="title">
<a href="revista\artistas\bruno-caldeira.html">
<h2>Sobre um treze de maio garganta-abaixo</h2>
</a>
</div>
<div class="text text-big poesia">
<a href="revista\artistas\bruno-caldeira.html">
<p>Segurar o silêncio do peso do mundo<br> Do sujo-modo de um comportamento sódico<br> Grilhões
<br> y correntes<br> Ecoam
<br> Na mente<br> Da Gente preta que sente<br> Manicômios
<br> Escolas
<br> Embranquecimentos
<br> Traumas (...)
<br><p>
</a>
</div>
<div class="author">
<a href="revista\artistas\bruno-caldeira.html">
<h4>Bruno Caldeira</h4>
</a>
</div>
<div class="continue-btn">
<a href="revista\artistas\bruno-caldeira.html">
<h5>CONTINUAR A LEITURA</h5>
</a>
</div>
</section>
<section class="btn-section">
<div class="btn">
<a href="revista\index.html">
<h2>Revista</h2>
</a>
</div>
<div id="btn-m" class="btn">
<a href="edicoes\index.html">
<h2>#1</h2>
</a>
</div>
</section>
My CSS3 stylesheet:
/* -- GENERAL -- */
/*
* colors:
* #4C1919 - Bordô* - rgba(178, 35, 35, .5) - rgba(233, 26, 26, 1)
* #BAA87C - Bege* - lighter => #CFC7B4
*
*
* fonts:
* 'Source Sans Pro', sans-serif;
* 'Oswald', sans-serif;
*/
/* global */
body {
font: 15px/1.5 'Oswald', 'Source Sans Pro', sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
body a:hover {
text-decoration: none;
color: lightgray;
}
section.logo-big img {
width: 80%;
}
.container {
width: 90%;
}
.logo {
width: 60%;
}
.social {
float: right;
margin-top: -85px;
margin-right: 100px;
width: 150px;
height: 60px;
}
.social-btns {
margin-top: 10px;
margin-left: 40px;
}
.social-btns img:hover {
color: #000000;
opacity: 0.7;
}
img.facebook-logo {
margin-top: -5px;
width: 30px;
height: 30px;
}
img.instagram-logo {
margin-top: 5px;
width: 60px;
height: 45px;
}
.section-title {
text-align: center;
margin-top: 100px;
color: #ffffff;
font-size: 120px;
}
/* landing-page */
.landing-page {
width: 100%;
height: 640px;
}
.menu {
width: 100%;
height: 90px;
background: #212121;
border-bottom: 5px solid black;
}
.menu ul {
margin: 35px auto;
}
.menu ul li {
display: inline;
}
.menu ul li a {
font-size: 20px;
color: #ffffff;
padding: 10px;
text-transform: uppercase;
}
.menu ul li a:hover {
color: Dimgray;
}
.landing-page .logo {
width: 50%;
float: right;
margin-right: 200px;
text-align: center;
}
.landing-page .logo img {
width: 80%;
margin-left: -270px;
}
.links-lp {
float: left;
width: 17%;
margin-top: 100px;
margin-left: 100px;
}
.links-lp li a {
color: #000000;
}
.links-lp li a:hover {
font-weight: bold;
background: rgba(233, 26, 26, 1);
}
.coluna01 {
float: right;
clear: right;
margin-top: -200px;
margin-right: 50px;
width: 16%;
height: 80px;
background: #212121;
border: 2px solid black;
box-shadow: 2px 2px 2px Dimgray;
}
.coluna01 h1 {
font-size: 30px;
text-align: center;
margin-top: 20px;
color: #ffffff;
text-shadow: 1.5px 1.5px Dimgray;
}
.coluna01 h1:hover {
color: lightgray;
}
/* cita */
section.cita {
width: 100%;
height: 420px;
background: #ffffff;
border-top: 20px solid #212121;
border-bottom: 20px solid #212121;
}
.coluna02 {
float: left;
width: 30%;
height: 400px;
background: #212121;
}
.coluna02 .section-title {
margin-top: 40px;
margin-left: 40px;
background: rgba(0,0,0, 1);
}
.coluna02 h2.section-title {
width: 80%;
height: 300px;
padding-top: 60px;
text-align: center;
text-shadow: 3px 5px Dimgray;
}
section.cita img {
width: 6%;
}
#aspas01 {
float: left;
margin-top: 130px;
margin-left: 50px;
}
#aspas02 {
float: right;
margin-top: 140px;
margin-right: 30px;
transform: rotate(180deg);
}
.quote-text {
float: left;
margin-top: 115px;
margin-left: 10px;
font-family: 'Crimson Text', serif;
}
.quote-text a {
color: #000000;
font-size: 70px;
font-style: italic;
text-shadow: 0.5px 0.5px black;
}
.quote-text a:hover {
color: Dimgray;
}
.quote-author h4 {
font-size: 40px;
font-style: normal;
text-align: center;
color: rgba(233, 26, 26, 1);
font-family: 'Oswald', serif;
text-shadow: 0.5px 0.5px rgba(233, 26, 26, 1);
}
.quote-author h4:hover {
color: firebrick;
}
/* posts landing page */
section.posts-section {
width: 100%;
height: 1700px;
}
.caixa-destaque {
float: left;
width: 45%;
height: 400px;
margin: 50px 0 20px 140px;
}
.caixa-destaque .title {
width: 80%;
}
.caixa-destaque .title h2 {
font-size: 100px;
color: rgba(233, 26, 26, 1);
text-shadow: 4px 4px black;
}
.caixa-destaque .img {
width: 100%;
}
.caixa-destaque .img img {
width: 80%;
margin-top: 10px;
box-shadow: 4px 4px 4px black;
}
.caixa-destaque .text {
width: 80%;
}
.caixa-destaque .text p {
color: #000000;
font-size: 20px;
text-align: justify;
}
.caixa-destaque .author {
float: right;
text-align: center;
margin-top: 10px;
margin-right: 120px;
width: 220px;
height: 60px;
padding: 10px;
background: #000000;
box-shadow: 2px 2px 2px dimgray;
}
.caixa-destaque .author h4 {
font-size: 30px;
color: #ffffff;
text-shadow: 1px 1px black;
}
.proxima-fila {
margin-top: 200px;
}
.poesia p {
text-align: left;
}
.text-big a p {
font-size: 20.6px;
}
.text-small a p {
font-size: 18px;
}
.caixa {
float: left;
width: 30%;
height: 200px;
margin: 50px 0 20px 140px;
}
.caixa .title h2 {
color: rgba(233, 26, 26, 1);
}
.caixa .img {
width: 80%;
}
.caixa .img img {
width: 100%;
}
.caixa .text p {
color: #000000;
}
.caixa .author {
float: right;
width: 220px;
height: 60px;
margin-top: 10px;
border: 1px solid black;
box-shadow: 2px 2px 2px dimgray;
background: #000000;
}
.caixa .author a,
.caixa .author h4 {
font-size: 25px;
margin-top: 10px;
text-align: center;
color: #ffffff;
text-shadow: 0.5px 0.5px black;
}
.caixa .author a:hover,
.caixa .author h4:hover,
.caixa-destaque .author a:hover,
.caixa-destaque .author h4:hover {
color: lightgray;
}
.caixa .continue-btn,
.caixa-destaque .continue-btn {
float: left;
width: 220px;
height: 60px;
margin-top: 10px;
border: 1px solid black;
box-shadow: 2px 2px 2px dimgray;
background: rgba(233, 26, 26, 1);
}
.caixa .continue-btn a,
.caixa-destaque .continue-btn a {
float: left;
margin-top: 15px;
margin-left: 30px;
text-align: center;
font-size: 20px;
color: #ffffff;
text-shadow: 1.5px 1.5px black;
}
section.btn-section {
float: left;
width: 300px;
height: 400px;
margin-left: 230px;
margin-top: 10px;
}
.btn {
width: 300px;
height: 70px;
background: rgba(233, 26, 26, 1);
box-shadow: 3px 3px 3px Dimgray;
border-radius: 0;
border: 2px solid black;
}
#btn-m {
margin-top: 110px;
}
.btn a h2 {
color: #ffffff;
font-size: 40px;
text-shadow: 1.5px 1.5px black;
}
.btn a:hover,
.btn h2:hover {
color: lightgray
}
section#maria-trindade.caixa-destaque .title h2 {
font-size: 90px;
}
section#bru-pereira.caixa-destaque {
float: right;
margin-top: -420px;
margin-right: 40px;
}
section#bru-pereira.caixa-destaque .title h2 {
text-align: center;
font-size: 100px;
}
#carol-do-vale.caixa-destaque {
float: right;
margin-top: -120px;
margin-right: 40px;
}
#carol-do-vale .title {
margin-top: 50px;
margin-bottom: 10px;
}
#carol-do-vale .title h2 {
font-size: 30px;
text-shadow: 1px 1px black;
}
#bruna-gomes.caixa-destaque {
margin-top: -170px;
}
#bruna-gomes.caixa-destaque .title h2 {
font-size: 90px;
}
#bruna-gomes.caixa-destaque .text {
margin-top: 10px;
}
#bruna-gomes.caixa-destaque .author h4 {
font-size: 25px;
}
#bruna-diniz.caixa {
width: 47%;
margin: -55px 0px 0px -50px;
}
#bruna-diniz.caixa .author {
margin-right: 140px;
}
#bruno-caldeira.caixa {
width: 47%;
margin: 160px 0px 0px -50px;
}
#bruno-caldeira.caixa .title h2 {
font-size: 30px;
}
#bruno-caldeira.caixa .text {
margin-top: 10px;
}
#bruno-caldeira.caixa .author {
margin-right: 140px;
}
/* eventos */
section.events-section {
width: 100%;
height: 500px;
background: #212121;
}
.agenda-text {
width: 22%;
float: left;
text-align: justify;
margin-top: 50px;
margin-left: 80px;
height: 400px;
}
.agenda-text h3 {
text-align: center;
font-size: 20px;
margin-bottom: 10px;
text-shadow: 1px 1px black;
}
.evento01,
.evento02 {
float: left;
}
.evento02 {
margin-top: 50px;
}
#eventos-text a h3,
#eventos-text a p {
text-shadow: 1px 1px black;
color: #ffffff;
}
#eventos-text a h3:hover,
#eventos-text a p:hover {
color: Dimgray;
}
#eventos {
float: left;
margin-top: 20px;
margin-left: 70px;
}
#eventos h1 {
text-shadow: 2px 2px black;
}
.calendario {
float: left;
margin-top: 200px;
margin-left: -395px;
}
.newsletter-section {
margin-top: 20px;
margin-right: 50px;
width: 28%;
float: right;
height: 430px;
background: #ffffff;
}
.newsletter-title {
float: left;
margin-top: 0px;
margin-left: 55px;
}
.newsletter-section .logo img {
width: 100%;
margin-left: 80px;
}
.newsletter-title h3 {
margin-left: -10px;
font-size: 60px;
text-shadow: 2px 2px rgba(233, 26, 26, 1);
}
#mc_embed_signup {
float: left;
margin: 20px 0 10px 60px;
}
#mc_embed_signup input[type=email] {
width: 87%;
height: 40px;
margin: 0 auto;
}
#mc_embed_signup input[type=submit] {
width: 30%;
height: 40px;
margin-left: 90px;
font-size: 18px;
}
.nav-bar-end {
width: 100%;
height: 200px;
background: #212121;
}
.nav-end ul {
float: left;
margin: 80px 0 0 300px;
}
.nav-end ul li{
display: inline;
margin-left: 20px;
}
.nav-end ul li a {
text-transform: uppercase;
font-size: 28px;
color: #ffffff;
text-shadow: 1.5px 1.5px black;
}
.nav-end ul li a:hover {
font-weight: normal;
color: lightgray;
}
.footer-section {
width: 100%;
height: 100px;
background: #212121;
}
.footer-text {
width: 50%;
margin: 0 auto;
text-align: center;
}
.footer-text h6 {
color: #ffffff;
text-shadow: 1px 1px black;
}
.footer-text a {
color: rgba(233, 26, 26, 1);
}
.footer-text a:hover {
color: firebrick;
}
/* MAIN CSS END */
#media (max-width: 480px) {
section.cita,
.calendario {
width: 0;
height: 0;
margin: 0;
padding: 0;
border: none;
display: none;
}
.coluna02 h2,
.quote-text h3,
.quote-author h4 {
font-size: 0;
}
.landing-page,
.landing-page .menu,
.landing-page .links-lp,
.landing-page .coluna01,
.landing-page .btn-section,
.cita,
.cita .coluna02,
.cita .quote-text,
.cita .quote-author,
.posts-section,
#maria-trindade,
#bru-pereira,
#carol-do-vale,
#bruna-gomes,
#bruna-diniz,
#bruno-caldeira,
.posts-section .caixa-destaque,
.posts-section .caixa,
.posts-section .btn-section,
.events-section,
.events-section .agenda,
.events-section #eventos,
.events-section .calendario,
.newsletter-section,
.nav-bar-end,
.nav-bar-end nav,
.nav-bar-end nav ul,
.footer-section {
float: none;
margin: 0;
padding: 0;
}
.clear-fix {
clear: both;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
.container-small {
width: 80%;
text-align: center;
margin: 0;
padding: 0;
}
.section-title {
font-size: 30px;
}
/* global */
/* landing-page */
.landing-page {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.landing-page .menu {
display: block;
width: 100%;
height: 200px;
margin-bottom: 10px;
}
.landing-page .menu nav {
padding-top: -20px;
width: 40%;
height: 100%;
}
.landing-page .menu ul {
margin-top: 25px;
margin-left: 20px;
}
.landing-page .menu li {
float: left;
}
.landing-page .menu a {
font-size: 16px;
}
.landing-page .social {
width: 70px;
height: 150px;
margin-top: -180px;
margin-right: 20px;
}
.landing-page .social-btns {
margin: 0;
padding: 0;
}
.landing-page .facebook-logo {
margin-top: 20px;
margin-left: 20px;
}
.landing-page .instagram-logo {
margin-top: 10px;
margin-left: 5px;
}
.landing-page .logo {
margin: 0 auto;
padding: 0;
width: 80%;
}
.landing-page .logo img {
width: 100%;
margin-top: -20px;
margin-left: -40px;
}
.landing-page .links-lp {
margin-top: 40px;
width: 100%;
}
.landing-page .links-lp ul {
text-align: center;
}
.landing-page .coluna01 {
margin-top: 20px;
width: 100%;
display: block;
}
/* revista posts */
section.posts-section {
width: 100%;
height: 2000px;
}
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:101.1%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

Answer 1

At the end of the file you have a lot of ‘reset’ classes. CSS files are read top to bottom to later rules replace those above.
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:101.1%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
This line here will be resetting your media query as it occurs after it in the code:
h1,h2,h3,h4,h5,h6 { font-size:101.1%; font-weight:normal; }
I would also recommend checking out something like normalize.css: http://nicolasgallagher.com/about-normalize-css/
You can include this at the start of your file.
EDIT:
Looking more closely not all the text has smaller sizes in the break point, for example you could add:
#media (max-width: 480px) {
section#maria-trindade.caixa-destaque .title h2 {
font-size: 30px;
}
}
You can also add as many media blocks as you like so you might find it easier to add each one after the rule it affects. This can help you when you’re learning but does increase the length of your code.
.someclass {
font-size: 10pt;
}
#media (max-width: 480px) {
.someclass {
font-size: 8pt;
}
}
.someclass2 {
color: red;
font-size: 20pt;
}
#media (max-width: 480px) {
.someclass2 {
font-size: 15pt;
}
}
On a side note your selectors are very complex which could be adding to your problems. Here’s some tips:
section#maria-trindade.caixa-destaque .title h2 {
font-size: 30px;
}
In the above rule you don’t need the section or class #maria-trindade .title h2 should be every you require and simplifies the specificity, see: https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
I would also recommend looking at using something like BEM as it keeps your classes simpler: http://getbem.com/
And also some utility classes, for example, all your red titles have the same visual styling but each have a long and complex selector.
<h2 class="t-1">My title</h2>
/* style for primary headers */
.t-1 {
font-size: 100px;
color: rgba(233, 26, 26, 1);
text-shadow: 4px 4px black;
}
You can the reuse this simple style and if the structure of your HTML changes you do not need to edit the CSS.
I hope this helps! :)