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

Front-end CSS
#1

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?? :frowning:

#3

up :frowning: ninguém pra me ajudar?

#4

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

#5

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

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; }
}
#6

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

#7

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

#8

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.

#9

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! :grinning: