[Ajudaaa] Como posicionar elementos/colunas lado a lado no css independente da resolução de tela?

11 de agosto de 2019 7 respostas

profcarvalho 11 de agosto de 2019

Olá, eu tenho um site que na versão mobile uma lacuna de “Jogos relacionados” não ficam lado a lado na resolução de tela 360 que eu testei no google resizer. Porém na resolução um pouco maior de celulares, a lacuna fica perfeitamente lado a lado. Como posso corrigir isso deixando os elementos SEMPRE lado a lado independente da resolução da tela visualizada???

Exemplo (no meu celular as lacunas aparecem assim, como desejo):
http://bit.ly/colunaperfeita

Exemplo² (já em resolução menor fica assim, bem feio):
http://bit.ly/colunaerrada

Meu código atualmente está assim

@media screen and (max-width:960px){

#related-posts{

float:center;

width:auto;margin-left: 10px;}

#related-posts a{

border-right: 0px dotted #E09711;}

#related-posts h4{

margin-top: 10px;

background:none;

font:17px Montserrat;

padding:3px;

color:#000;

text-transform:none;

text-align: center !important;}

#related-posts .related_img {

margin:2px;

border:4px solid #E09711;

object-fit: cover;

width:140px;

height:100%;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px; }

}

É possível alguma solução pra isso??

7 Respostas

profcarvalho 11 de ago. de 2019

up ninguém pra me ajudar?

Matheus_Campelo 11 de ago. de 2019

width 40% na div que contem a imagem e o texto e float left acho que vai

profcarvalho 12 de ago. de 2019

Fiz isso, mas ficou centralizado na versão menor de resolução. Não sei pq, aff

Tinha deixado o código assim:

@media screen and (max-width:960px){
#related-posts{
**float:left;**
width:auto;margin-left: 10px;}
#related-posts a{
border-right: 0px dotted #E09711;}
#related-posts h4{
margin-top: 10px;
background:none;
font:17px Montserrat;
padding:3px;
color:#000;
text-transform:none;
text-align: center !important;}
**#related-posts .related_img {**
margin:2px;
border:4px solid #E09711;
object-fit: cover;
**width:40%;**
height:100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }
}

Matheus_Campelo 12 de ago. de 2019

na primeira related-posts tenta float:left; + width:40%; (se não der vai diminuindo a porcentagem pra ver se vai mudar ou não)
deixa só margin-left:10px e bota os 2 que te falei

Matheus_Campelo 12 de ago. de 2019

e no html cada conjunto de {IMAGEM, descricao e o icone link download} vai ter o seu related post, acredito que será assim que vai dar certo

danieldejesus 12 de ago. de 2019

Procure um tutorial para entender as propriedades display: flex; e position do CSS.

Indico o canal ColabCode no youtube.

Depois de entender você não terá mais problemas com posicionamento de elementos.

jrbyte 12 de ago. de 2019

Olá @profcarvalho!

A melhor solução para o seu problema é utilizar um código similar a esse com Flexbox:

Elemento Pai:

@media screen and (max-width:960px) {
display: flex;
flex-direction: column;
justify-content: space-between;
}

Colunas desse pai:

@media screen and (max-width:960px) {
width: 45%;
}

fonte: https://origamid.com/projetos/flexbox-guia-completo/

Abraços e boa sorte!

Criado 11 de agosto de 2019

Ultima resposta 12 de ago. de 2019

Respostas 7

Participantes 4

7 Respostas

Topicos relacionados