Solucionado
.secao {
width: 100%;
float: left;
}
@media (min-width: 600px) {
.secao {
width: 50%;
}
}
@media (min-width: 1000px) {
.secao {
width: 33.333%;
}
}Olá Pessoal,
Testei o código com e sem o float left lá na secão. Funcionou com, mas, não percebi por que é necessário ter o float na versão padrão sendo que esta é de apenas 1 coluna e não fazer sentido ter flutuações aí.
Muito obrigado, Nicécio
Boa noite Nicécio,
Pelo que entendi, tem coerência sim em ter o float, pois se você perceber quando a tela tiver com 600px de largura a classe .secao, terá width:50%:
@media (min-width: 600px) {
.secao {
width: 50%;
}
}Quer dizer que se tiver mais que um elemento .secao com o tamanho da tela em 600px, eles flutuarão de dois em dois, e no caso de 1000px:
@media (min-width: 1000px) {
.secao {
width: 33.333%;
}
}Flutuarão de três em três. Entendeu?
Qualquer dúvida avise, abs!
Você tem razão, nicecio, o float:left logo no início não é necessário. Daria pra colocá-lo apenas a partir da primeira media query (de 600px).
É questão de gosto. Eu tenho uma preferência por deixar os códigos dentro das media queries o menor possível. Ou seja, deixar o máximo possível de coisas no código base. Por isso fiz assim no exercício.
Mas concordo que nesse caso talvez pudesse ser mais claro ter colocado na media query mesmo...
Olá Nicécio,
O float:left no código base, pelo que eu entendi, te desobriga a escrevê-lo em dois locais; removendo-o do código base você teria que citá-lo nas media queries:
@media (min-width: 600px) {
.secao {
width: 50%;
float: left;
}
}
@media (min-width: 1000px) {
.secao {
width: 33.333%;
float: left;
}
}Pensando pelo lado de praticidade (escrever menos), é melhor deixa-lo no código base!
Muito obrigado à todos pelo esclarecimento... ficou muito claro! :)
Sebastiao, nao exatamente. Se colocar o float na media query de 600px nao precisaria colocar na de 1000px. A mq de 600px vale na de 1000 tbm
Obrigado pela informação Sérgio! Eu não sabia disso.