Having troubles with #media - html

Im just staring with #media css3, and my trouble here is to set responsive, and i dont really get it how to divide this in 2 when the screen goes to 900px
i know its # media screen (max-width: 900px) {}
but i cant made the code inside work to divide in 2
.row {
width: 100%;
height: auto;
clear: both;
float: left;
}
.contenido{
width: 985px;
margin: 0 auto;
text-align: left;
clear: both;
}
.lenovoDescripcion .contenido {
width: 978px;
margin: 0 auto;
text-align: left;
clear: both;
padding-left: 3px;
padding-right: 4px;
}
.lenovoDescripcion .producto {
padding-top: 25px;
float: left;
padding-bottom: 25px;
}
.lenovoDescripcion .producto img {
width: auto;
height: auto;
float: left;
margin-right: 30px;
margin-top: 110px;
}
.lenovoDescripcion .descripcion {
float: right;
text-align: left;
}
.lenovoDescripcion .descripcion h2 {
color: #0084b0;
font-size: 37px;
font-weight: normal;
height: 43px;
overflow: hidden;
margin-left: 50%;
}
.lenovoDescripcion .descripcion h3 {
color: #cc7000;
font-size: 29px;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 35%;
margin-top: -10px;
}
.lenovoDescripcion .descripcion p {
color: #373737;
font-size: 16px;
font-style: bold;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 35%;
margin-top: 0;
}
.lenovoDescripcion .descripcion h4 {
color: #c6c6c6;
font-size: 16px;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 35%;
margin-bottom: 0;
}
.lenovoDescripcion .descripcion h5 {
color: #0084b0;
font-size: 16px;
font-weight: normal;
height: auto;
overflow: hidden;
margin-left: 60%;
margin-top: -35px;
}
.lenovoDescripcion .descripcion li {
font-size: 14px;
line-height: auto;
color: #7d7c7c;
height: auto;
overflow: hidden;
margin-left: 30%;
width: 100%;
}
.lenovoDescripcion .descripcion a {
text-decoration: none;
color: #FFFFFF;
border: 1px solid #ff4500;
padding: 8px;
background-color: #ff4500;
margin-left: 60%;
transition: all linear .15s;
}
.lenovoDescripcion .descripcion a:hover {
background-color: #b33000;
border: 1px solid #FFFFFF;
}
strike {
font-size: 16px;
margin-left: 35%;
color: #c6c6c6;
}
hr {
display: block;
border: 1px dotted #000000;
width: 30%;
}
footer hr {
display: block;
border: 1px solid #000000;
width: 100%;
}
<div class="row lenovoDescripcion">
<div class="contenido">
<div class="producto">
<img src="images/Productos/pc2.png">
<div class="descripcion">
<h2>IDEAPAD S400</h2>
<h5>(59402530)</h5>
<h4>Precio de lista</h4 >
<strike>$1,399,000.00</strike>
<hr>
<p>Precio con descuento 10%</p>
<h3>$1,259,100.00</h3>
<ul>
<li>Fully optimized with recognizable touch gestures for the Windows 8.1 experience</li>
<li>Added dual-mode functionality to easily convert from a mouse to pointer</li>
<li>Winner of the Reddot Design Award</li>
</ul>
<span>DESCUBRE Y COMPRA</span>
</div>
</div>
</div><!-- Producto -->
</div><!-- row -->

You need to do so with the width attribute and floats. Here is 1 example: http://jsfiddle.net/cUCvY/1/
HTML:
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
CSS:
.wrapper {
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 200px;
padding: 10px;
}
#one {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
border-right:2px solid #000;
}
#two {
background-color: white;
overflow:hidden;
margin:10px;
min-height:170px;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}

Related

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

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; }
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! :)

White screen when loading converted wordpress theme from html

I have a problem converting html page into wordpress theme. When loading theme i just see white screen but other previously installed theme looks normal. I read earlier similar subject on stackoverflow but it seems that it doesnt help me. Can somebody help me solve this problem?
These are my theme files:
Theme Name: Vesti
Theme URI: www.komunalacbecej.com
Author: Aljosa Boskovic
Author URI: www.komunalacbecej.com
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/
* {
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
background-color: #faf6d0;
padding: 0;
//background-image: url('images/green.png');
background-size: cover;
}
header{
display: block;
width: 100%;
margin: 0 auto;
}
#uppermenu{
float: right;
margin-top: 4px;
}
#uppermenu ul{
margin-right: 15px;
}
#uppermenu ul li{
display: inline;
padding: 5px;
font-size: 15px;
color: grey;
font-weight: 540;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}
#uppermenu ul li:hover{
color:#156038;
}
#flags{
float:right;
margin-top: 4px;
}
#flags img{
width: 20px;
height: 20px;
margin-right: 7px;
cursor: pointer;
}
#logo{
vertical-align: middle;
float: left;
height: 70px;
}
#naziv{
float: left;
color: #1a7645;
height: 70px;
width: 300px;
box-sizing: border-box;
padding: 5px;
font-family: sans-serif;
}
nav{
width: 100%;
background: #3d874d;
text-align: center;
position: relative;
z-index: 11;
border: 2px solid #a4a41b;
margin: 0 auto 10px auto;
clear: both;
border-radius: 2px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
padding: 15px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
nav ul li a{
text-decoration: none;
color: #fff;
display: block;
font-size: 1.1em;
}
nav ul li:hover{
background: #150;
}
nav ul li a:hover{
color: #fdf742;
}
nav ul ul {
position: absolute;
width: 150px;
background: #2a562c;
opacity: 0.8;
margin-top: 15px;
margin-left: -15px;
text-align: left;
display: none;
}
nav ul ul li{
display: block;
text-align: left;
border-bottom: 1px solid #5b7e5d;
}
nav ul li:hover > ul{
display: block;
}
#slide{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
margin: 0 auto;
}
#slidephoto{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
border-radius: 5px;
}
#leftbutton{
width: 5%;
height:500px;
position: absolute;
left: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#rightbutton{
width: 5%;
height:500px;
position: absolute;
right: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#leftarrow {
vertical-align: middle;
cursor: pointer;
}
#rightarrow {
vertical-align: middle;
cursor: pointer;
}
#leftarrow:hover{
background: grey;
}
#rightarrow:hover{
background: grey;
}
#naslov{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
text-indent: 30px;
font-size: 20px;
color: #1a7645;
font-family: Georgia;
border-top: 1px solid #1a7645;
background: #639665;
color: #e6f3d1;
padding: 10px 0;
}
#firsttext{
width: 100%;
margin: 30px auto 0 auto;
font-family: 'Times New Roman';
line-height: 1.4em;
font-size: 19px;
text-align: justify;
padding-top: 10px;
box-sizing: border-box;
padding: 40px 90px;
color: white;
background: #6eae49;;
border-radius: 4px;
}
#firsttext span{
font-size: 28px;
font-weight: bold;
color: #1a7645;
}
#delatnosti {
width: 100%;
position: relative;
text-align: center;
background-color: #e6f3d1;
margin: 0px auto;
box-sizing: border-box;
border: 1px solid #6d9e6f;
padding: 20px ;
}
.boxes div {
display: inline-block;
border: 1px solid #a2b6c0;
width: 200px;
height: 210px;
vertical-align: top;
text-align: center;
background-color: white;
color: #46545b;
margin: 20px 10px;
cursor: pointer;
border-radius: 4px;
}
.boxes div:hover{
border: 1px solid green;
background-color: #dfdede;
}
.boxes a img{
width: 200px;
height: 110px;
}
.boxes a p, h3{
//margin: 5px;
text-decoration: none;
}
.boxes div a{
text-decoration: none;
color: black;
}
#obavestenja{
width: 100%;
height: 40px;
//border: 1px solid black;
font-size: 2em;
line-height: 40px;
text-indent: 210px;
}
#mainnews-banner{
width: 100%;
margin: 0 auto;
}
#mainnews-banner h1{
text-indent: 210px;
font-family: serif;
letter-spacing: 3px;
}
#sadrzaj{
width: 75%;
background-color: white;
display: inline-block;
box-sizing: border-box;
text-align: justify;
border: 1px solid black;
}
#vestikolone{
width: 80%;
}
#glavnavestslika{
width: 100%;
height: 430px;
background: url("images/slika4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#glavnavesttekst{
width: 100%;
height: 180px;
background: black;
position: absolute;
bottom: 0;
opacity: .6;
}
#glavnavesttekst p{
color: #ded8d8;
opacity: 1;
padding: 10px;
font-size: 18px;
font-family: Georgia;
line-height: 23px;
}
#glavnavesttekst h2{
color: white;
font-weight: bold;
opacity: 1;
font-family: Georgia;
text-indent: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#glavnavest {
font-size: 1.2em;
font-family: 'Oswald', sans-serif;
}
#datum{
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
background: black;
}
#banner{
width: 25%;
float: right;
text-align: center;
//border: 3px solid green;
//background: #f1f1f1;
}
#banner img{
width: 120px;
height: 100px;
background: #9ac0f6;
border: 1px solid #9ac0f6;
cursor: pointer;
}
#banner p{
font-size: 1em;
font-family: Arial;
background: #fecd61;
width: 60%;
margin: 0 auto;
margin-bottom: 8px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
#pastnewspara{
text-transform: uppercase;
background-color: black;
color: white;
width: 75%;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 1px;
opacity: .9;
}
#pastnews{
border-top: none;
position: relative;
text-align: center;
width:75%;
height: 140px;
float: left;
border: 1px dashed black;
border-top: none;
}
.column{
width: 25%;
height: 140px;
display: inline-block;
margin-left: -4px;
background-color: white;
box-sizing: border-box;
vertical-align: top;
box-sizing: border-box;
}
.column img{
width: 100%;
height:140px;
}
.column h3,p{
text-align: left;
padding: 5px;
}
#prognoza{
clear: both;
width: 75%;
background: brown;
color: #a2b6c0;
border-bottom: 2px solid white;
}
.weatherwidget-io{
width: 100%;
display: block;
height: 20px;
text-align: left;
}
#footer{
width: 100%;
height: 130px;
background: white;
background: #a2b6c0;
text-align: center;
position: relative;
border-top: 3px solid white;
}
#icons{
line-height: 130px;
}
#footer i{
color: #554f4f;
font-size: 36px;
padding: 26px;
vertical-align: middle;
}
#footer span {
position: absolute;
right: 50px;
color: grey;
font-family: sans-serif;
}
#footer span i{
padding: 6px;
color: grey;
font-size: 0.6em;
}
/* stranica zelenilo.html */
#submenu ul li{
list-style: none;
font-size: 1.1em;
padding-bottom: 5px;
border-bottom: 2px solid green;
margin-bottom: 13px;
background: rgba(96,96,96,0.4);
}
#submenu {
margin-top: 30px;
width: 22%;
background: url('images/leaf3.jpg');
background-size: cover;
opacity: .9;
font-family: 'Oswald', sans-serif;
text-align: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 10px 0;
color: #cfcf05;
border: 2px solid green;
float: left;
}
#submenu ul {
opacity: 1;
padding: 40px 20px;
font-size: 16px;
}
#zelenilobody{
background: url('images/goranski.jpg');
background-size: cover;
height: 1000px;
}
#submenu ul li:hover{
background-color: grey;
background: rgba(96,96,96,0.7);
color: white;
cursor: pointer;
}
#navigation nav{
background-color: #61a239;
}
#zelenilo-naziv #naziv{
color: #60a23a;
background-color: rgba(96,96,96,0.7);
}
#zelenilo-uppermenu #uppermenu li{
color: #60a23a;
background-color: rgba(96,96,96,0.8);
}
#zelenilo-tekst{
width: 75%;
float: right;
margin-top: 30px;
border: 1px solid white;
background: rgb(246, 241, 241, 0.8);
box-sizing: border-box;
padding: 20px;
}
#zelenilo-tekst p{
line-height: 20px;
margin-top: 10px;
font-size: 17px;
}
#zelenilo-tekst ol{
padding-left: 20px;
line-height: 24px;
margin-top: 15px;
font-size: 17px;
}
/* stranica vesti.php */
#blognews {
background-color: white;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
}
#article {
border: 1px solid black;
margin-top: 20px 0;
}
#article h2 {
margin-left: 15px;
margin-top: 10px;
}
#datumclanka{
display: block;
margin-left: 15px;
}
#article img{
height: 120px;
display: inline-block;
width: 180px;
vertical-align: middle;
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
#article p{
display: inline-block;
width: 650px;
vertical-align: middle;
font-size: 1.1em;
margin-left: 10px;
}
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>
<img src="images/logofirme.jpg" id="logo">
<div id="naziv">
<h1><?php bloginfo('name'); ?></h1>
<p>Javno preduzeće za komunalne usluge</p>
</div>
<div id="flags">
<img src="images/serbia.png">
<img src="images/hungary.png">
</div>
<div id="uppermenu">
<ul>
<li>Najčešća pitanja</li>
<li>Korisni linkovi</li>
</ul>
</div>
<?php wp_nav_menu(); ?>
</header>
footer.php
<div id="footer">
<div id="icons">
<i class="fa fa-phone"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-facebook-official"></i>
<span><i class="fa fa-copyright"></i>Design by Aleksey</span>
</div>
</div>
</body>
</html>
index.php
<?php get_header(); ?>
test
<?php get_footer(); ?>
Can you try following solutions?
In first line of style.css add "/*" before "Theme Name: Vesti". So it will be like
/*
Theme Name: Vesti
Disable/deactivate all plugins to check if confliction happens between your active theme and plugins. And then enable it one by one if issue happens because of it.
Add following line in wp-config.php file for increasing PHP memory limit.
define(‘WP_MEMORY_LIMIT’, ’64M’);

web page layout problems

I am working on web page layouts. I created this one.
https://codepen.io/iamgonge/pen/paOxxb
I dont understand why the .container .left-side and .right-side elements start at the top of the browser and not below the header. Shouldn't the layout out be header->section(hero)->section(one)? I would think that the top of any of those three divs would be underneath the header but they are not. What amy I not understanding here?
body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}
header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}
.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}
.main-links a:hover {
color: #00843d;
}
.main-links a:active {
color: red;
}
.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}
nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}
nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}
nav li:hover {
background: rgba(255, 255, 255, 0.25);
}
nav li:active {
border-bottom: 2px solid red;
color: red;
}
.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}
.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}
.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}
.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}
.nav-right p a:hover {
color: #00843d;
}
.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}
.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}
.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}
.rss-title,
.rss-date {
margin: 0px!important;
}
.rss-feed {
margin: 10px 5px 20px 0px;
}
.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}
.hero,
.one {
position: relative;
height: 100%;
}
.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}
.success:hover {
font-size: 71px;
}
#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}
#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}
#media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>
<nav>
<ul class="main-nav">
<li class="main-links">home</li>
<li class="main-links">about</li>
<li class="main-links">projects</li>
<li class="main-links">portal</li>
<li class="main-links">links</li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>
The reason is that you have applied position: fixed; to your <header> tag. When you do this you must account for the height of the header and push down other elements to restore the layout.

3 DIV side by side wont align correctly

I'm sure this is a facepalm moment for me, but a need some fresh eyes to have a look and tell me what I'm doing wrong... because I can't spot it!
That last button on the right needs to be in line with the other two, please help.
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
</div>
Change the order of your html for your code to take hold...
The float:right; element should be before the center aligned element.
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration: none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration: none;
display: block
}
.sbutton a:hover {
text-decoration: none;
display: block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration: none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
</div>
I've made you a fiddle here http://jsfiddle.net/vmb0sfag/3/
Use float left on your main elements:
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
float: left;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
float: left;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
float: left;
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
float: left;
}
#arrowright:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}

2 different css files one page, browser applying only style from one file

I'm trying to create a new page in which I apply my own CSS and use some of the components developed here: http://aozora.github.io/bootmetro/index.html.
Problem is that on one component the browser is only applying the style from my file and not the style defined on the .css file I downloaded from the site. Trouble is that firebug shows that the file is being tranfered to the user but somehow its not being used even if the class defined from tag is clearly defined on the other .css file.
Heres the source of the page:
<div class="header">
<div class="right textHeader">
<div class="left logo"><p class="title">Portal para la gestión y control<br>
de la implementación del sistema de información PAI
</p>
</div>
<div class="right textInfo">
<div class="left greetTime">
<img src="/Content/Images/calendar.png"> 27/04/2013 12:15:25 p.m.
</div>
<div class="greet">
Hola, <a class="username" href="/Account/Manage" title="Manage">administrador</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" value="gsGgnTHMhT55z7aQFmarrbLlUQK4x2nuMNZP_kXbqRx2j3kWOhNSc3RptPzG8118PGgkQOpU_erRuCcZ7GvH4FhKNAlaCug0dFUGKjiFqbP5wjhFTJConDCIZzZppq090" type="hidden"> Desconectarse
</form> </div>
</div>
</div>
<div class="left imgHeader">
<img src="/Content/Images/logo-minSalud.png">
<img src="/Content/Images/logo-prosperidad.png">
</div>
</div>
<div id="categories">
Inicio
</div>
<div id="content">
<h2>Bienvenido</h2>
This is the item I want to apply the class to
Administrar banco de información**Administrar usuariosReportes gerenciales
</div>
Here's the firebug screenshot:
And here's the screenshot showing that both files are being downloaded:
Here's my css file:
body {
color: #353535;
background-color: #fff;
background: url("Images/bg.jpg") repeat-x 0 0 #EBEBEB;
font-size: 1em;
margin: 0;
padding: 0;
font-family: 'Maven Pro', sans-serif;
}
header, footer, nav, section
{
display: block;
}
.editButton {
background:url(Images/editarPequeño.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.deleteButton {
background:url(Images/deletePequeno.ico);
background-repeat: no-repeat;
display: block;
text-indent: -9999px; /* hides the link text */
}
.left
{
float:left
}
.right {
float: right;
}
.navBar {
background-color: #F7921E;
height: 48px;
}
/*//////////TABLA LISTADO /////////////////////////*/
table {
color: #333;
/*font-family: Helvetica, Arial, sans-serif;*/
/*width: 640px;*/
border-collapse:
collapse; border-spacing: 0;
margin-left:auto;
margin-right:auto;
}
td, th {
border: 1px solid transparent; /* No more visible border */
height: 30px;
transition: all 0.3s; /* Simple transition for hover effect */
}
th {
background: #5DBCD2; /* Darken header a bit */
font-weight: bold;
border: 1px solid #CCC;
}
td {
background: #FAFAFA;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; } /* Hover cell effect! */
/*///////////////////////////////*/
.title {
/*font-family: 'Montserrat', sans-serif;*/
/*width: 500px;*/
font-weight: bold;
}
.greet {
font-size: 0.78em;
}
.textInfo {
width:50%;
/*height:100%;*/
}
/*///////////////////////////////////////*/
.listView {
margin-left: 0px;
list-style: none outside none;
}
ul{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
.metrouicss .listview:before, .metrouicss .listview:after {
display: table;
content: "";
}
/*///////////////////////////////////////*/
.okButton {
background: -moz-linear-gradient(center top , #ff6600 0px, #ff6600 100%) repeat scroll 0 0 transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
opacity: 0.75;
padding: 6px 10px;
margin-top:5px;
display:block;
margin:0px auto;
}
.okButton {
transition: opacity 0.2s ease 0s;
}
.footer {
width: 100%;
height: 100px;
background: none repeat scroll 0% 0% rgb(138, 188, 203);
margin-top:50px;
color: rgb(0, 0, 0);
font-size: 0.7em;
border-top: 1px solid rgb(98, 143, 156);
}
.logo {
width:50%
}
.textHeader {
width:63%
}
.greetTime {
font-size: 0.58em;
/*width: 15px;*/
}
.header {
height: 122px;
width: auto;
margin-top:20px;
/*margin-left:5%;*/
/*margin: 0px auto;*/
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
color:black
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
/*CSS Aditions*/
BODY { font-size: 1em; margin: 0; }
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A
{
/*font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;*/
}
A#loginLink {
font-size:1.5em;
}
/*DIV#header { background-color: #5DBCD2; border-bottom: 2px solid #111; color: black; }*/
DIV#header DIV.title { font-size: 2em; padding: .6em; }
DIV#title { font-size: 2em; padding: .6em;float:right }
DIV#headerImages { float:left}
/*DIV#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; }*/
DIV#categories { float: left; width: 8em; padding: .3em; }
DIV.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; }
DIV.item:first-child { border-top:none; padding-top: 0; }
DIV.item H3 { font-size: 1.3em; margin: 0 0 .25em 0; }
DIV.item H4 { font-size: 1.1em; margin:.4em 0 0 0; }
DIV.pager { text-align:right; border-top: 2px solid silver;
padding: .5em 0 0 0; margin-top: 1em; }
DIV.pager A { font-size: 1.1em; color: #666; text-decoration: none;
padding: 0 .4em 0 .4em; }
DIV.pager A:hover { background-color: Silver; }
DIV.pager A.selected { background-color: #353535; color: White; }
DIV#categories A
{
font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial; display: block;
text-decoration: none; padding: .6em; color: Black;
border-bottom: 1px solid silver;
}
DIV#categories A.selected { background-color: #666; color: White; }
DIV#categories A:hover { background-color: #CCC; }
DIV#categories A.selected:hover { background-color: #666; }
And heres the css file i downloaded
/* Metro Tiles
-------------------------------------------------- */
.bg-color-blue {
background-color: #0072BC !important;
}
.bg-color-blueDark {
background-color: #662D91 !important;
}
.bg-color-green {
background-color: #01a31c !important;
}
.bg-color-greenDark {
background-color: #008641 !important;
}
.bg-color-red {
background-color: #bc1c48 !important;
}
.bg-color-yellow {
background-color: #ffc40d !important;
}
.bg-color-orange {
background-color: #CD4900 !important;
}
.bg-color-pink {
background-color: #c3325f !important;
}
.bg-color-purple {
background-color: #603cba !important;
}
.bg-color-darken {
background-color: #1c1c1c !important;
}
.metro {
overflow: hidden;
}
.metro .carousel-control {
top: 20%;
}
.metro .metro-sections {
height: auto;
position: relative;
overflow: hidden;
width: 10000px;
}
.metro-sections h2 {
margin-left: 5px;
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
text-transform: lowercase;
}
.metro .metro-sections .metro-section {
position: relative;
float: left;
/*width: 810px !important;*/
width: auto;
height: auto;
margin-right: 75px;
}
/* fixed widths for tile sections
units are measured per square tile width, i.e.: tile-span-1 = 160px = 1 square tile width (including margin)
*/
.metro .metro-sections .metro-section.tile-span-1 { width: 160px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-2 { width: 320px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-3 { width: 480px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-4 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-5 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-6 { width: 800px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-7 { width: 960px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-8 { width: 1120px; margin-left: 0;}
/*default tile definition */
.metro .tile {
position: relative;
display: block;
float: left;
margin: 5px;
padding: 0;
/*padding-bottom: 1px;*/
width: 150px;
height: 150px;
color: #FFF;
cursor: pointer;
overflow: hidden;
text-decoration: none;
background-color: #2C83EF;
}
.metro .tile:hover {
outline: 3px #225a68 solid;
}
.scroll {
-webkit-transition:left 0.6s ease; /* here the animation is set on 5 seconds */
-moz-transition:left 0.6s ease;
-o-transition:left 0.6s ease;
transition:left 0.6s ease;
}
/* Metro Tiles Templates
-------------------------------------------------- */
.metro .tile.square.text {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.square.image {
width: 150px;
height: 150px;
padding: 0;
}
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
.metro .tile.squarepeek {
width: 150px;
height: 300px;
}
.metro .tile.squarepeek .text-inner {
width: 110px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.text {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.image {
width: 310px;
height: 150px;
}
.metro .tile.wide.image.collection img {
max-width: 158px;
max-height: 150px;
float: left;
}
/* template for full image */
.metro .tile.wide.imagetext.wideimage {
width: 310px;
height: 150px;
padding: 0;
}
/* template with normal 80x80 image */
.metro .tile.wide.imagetext {
width: 270px;
height: 110px;
padding: 20px;
}
.metro .tile.wide.imagetext .textover-wrapper {
position: absolute;
bottom: 0;
width: 270px;
height: 48px;
padding: 2px 20px;
background-color: inherit;
}
.metro .tile.widepeek {
width: 310px;
height: 300px;
}
/* Default Tile
-------------------------------------------------- */
.metro .tile.app .image-wrapper {
display: block;
width: 150px;
height: 80px;
margin-top: 20px;
padding: 8px 0;
text-align: center;
vertical-align: middle;
}
.metro .tile.app .image-wrapper img {
max-width: 80px;
max-height: 80px;
margin: 0 auto;
}
.metro .tile .app-label {
bottom: 5px;
font-size: 12px;
left: 20px;
position: absolute;
}
.metro .tile .app-count {
position: absolute;
right: 20px;
bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.metro .tile.wide.app {
width: 310px;
height: 150px;
}
.metro .tile.wide.app .image-wrapper {
width: 310px;
}
.image-wrapper span.icon {
font-size: 80px;
height: 80px;
line-height: 80px;
width: 80px;
}
/*
-------------------------------------------------- */
.metro .tile.square.text .text-big {
font-size: 76px;
line-height: 76px;
text-align: left;
overflow: hidden;
}
.metro .tile.square.text.tilesquareblock .text {
font-size: 14px;
font-weight: bold;
text-align: left;
overflow: hidden;
}
/* normal header in 1 line of wrapped text*/
.metro .tile .text-header {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
max-height: 36px;
text-align: left;
overflow: hidden;
}
/* One string of large text wrapped over a maximum of three lines.*/
.metro .tile .text-header3 {
font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
font-weight: 300;
font-size: 34px;
line-height: 36px;
text-align: left;
max-height: 110px;
overflow: hidden;
}
/* 1 line of regular text (not wrapped) */
.metro .tile .text {
font-size: 15px;
line-height: 18px;
height: 18px;
font-weight: normal;
text-align: left;
overflow: hidden;
}
/* regular text wrapped over a maximum of 2 lines */
.metro .tile .text2 {
font-size: 15px;
font-weight: normal;
line-height: 20px;
max-height: 44px;
overflow: hidden;
text-align: left;
}
/* regular text wrapped over a maximum of 3 lines */
.metro .tile .text3 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 56px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 4 lines */
.metro .tile .text4 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 72px;
overflow: hidden;
}
/* regular text wrapped over a maximum of 5 lines */
.metro .tile .text5 {
font-size: 15px;
line-height: 18px;
font-weight: normal;
text-align: left;
max-height: 92px;
overflow: hidden;
}
/* Image Only Tiles
-------------------------------------------------- */
.metro .tile.square.image img {
max-width: 150px;
max-height: 150px;
}
/* Wide Text Only Tiles
-------------------------------------------------- */
.metro .tile .column {
display: block;
float: left;
width: 130px;
}
.metro .tile .column2-label {
display: block;
float: left;
width: 90px;
}
.metro .tile .column2-text {
display: block;
float: left;
width: 160px;
}
.metro .tile .column3-label {
display: block;
float: left;
width: 50px;
}
.metro .tile .column3-text {
display: block;
float: left;
width: 200px;
}
/* Wide Image Only Tiles
-------------------------------------------------- */
.metro .tile.wide.image .mini-tiles {
display: inline-block;
float: left;
width: 152px;
height: 150px;
}
.metro .tile.wide.image .mini-tiles img {
display: inline-block;
float: left;
max-width: 75px;
max-height: 75px;
border-left: 1px solid #2A2A2A;
}
/* Wide Image & Text Tiles
-------------------------------------------------- */
.metro .tile.wide.imagetext .column-text,
.metro .tile.wide.text .column-text {
display: block;
float: left;
width: 180px;
padding-left: 10px;
}
.metro .tile.wide.text .column-text-big {
display: block;
float: left;
width: 80px;
}
.metro .tile.wide.imagetext .image-wrapper {
display: block;
float: left;
width: 80px;
height: 80px;
}
.metro .tile.wide.imagetext .image-wrapper img {
max-width: 80px;
max-height: 80px;
}
/* ListView
-------------------------------------------------- */
.listview-container.grid-layout {
border: solid 2px rgba(0, 0, 0, 0.13);
height: 240px;
overflow: auto;
padding: 2px;
background-color: #FFF;
}
.mediumListIconTextItem {
display: inline-block;
position: relative;
vertical-align: top;;
width: 282px;
height: 70px;
padding: 5px;
margin-bottom: 7px;
margin-right: 24px;
border: solid 3px transparent;
overflow: hidden;
background-color: #FFF;
cursor: pointer;
}
.mediumListIconTextItem:hover {
border: solid 3px #b3b3b3;
background-color: #b3b3b3;
}
.mediumListIconTextItem img.mediumListIconTextItem-Image {
display: inline-block;
vertical-align: top;;
width: 60px;
height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Image[class^="icon-"],
.mediumListIconTextItem .mediumListIconTextItem-Image[class*=" icon-"] {
display: inline-block;
width: 60px;
height: 60px;
font-size: 60px;
line-height: 60px;
margin: 5px;
}
.mediumListIconTextItem .mediumListIconTextItem-Detail {
display: inline-block;
vertical-align: top;;
margin: 5px;
}
.mediumListIconTextItem.selected {
background-color: #4617b4;
}
.mediumListIconTextItem.selected:after {
position: absolute;
top: 5px;
right: 5px;
width: 16px;
height: 16px;
font-family: 'IcoMoon';
content: "\e03c";
color: #FFF;
font-size: 16px;
}
.mediumListIconTextItem.selected:hover {
border: solid 3px #b3b3b3;
background-color: #4617b4;
}
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h4,
.mediumListIconTextItem.selected .mediumListIconTextItem-Detail h6 {
color: #FFF;
}
/* Special undocumented tiles for ads
-------------------------------------------------- */
#ad-container {
background-color: #0072BC;
height: 90px;
margin-top: 10px;
text-align: center;
width: 100%;
}
/*Button (125x125)*/
.metro .tile.ad.ad125 {
width: 125px;
height: 125px;
padding: 12px 13px 13px 12px;
}
/*Small Rectangle (180x150)*/
.metro .tile.wide.ad.ad125 {
width: 180px;
height: 150px;
padding: 0 65px;
}
All the rules from the downloaded file that affect the .tile class start like this .metro .tile which means that the .tile element must be a descendant of a .metro element (an element with class metro)
You html does not show your link being inside a .metro element so the styles do not apply ..
it seems that stylesheets are loaded, but from basic look at the Metro Tiles CSS I decided that you forgot to put metro class to any parent of your tile, for example add class to your content
<div id="content" class="metro">