Tabelas e galerias de imagem ficam com largura maior que a da imagem caso o texto seja extenso

[riomccloud]

Precisamos arranjar alguma maneira de fazer com que esses quadros tenham sempre a mesma largura da imagem. Tentei resolver isso durante o desenvolvimento e não consegui, por isso de quebra-galho usei quebras de linha manuais. No entanto, elas não funcionam adequadamente em todas as resoluções.

[Nix-Alba]

Solução que encontrei foi remover o width: 100% dessa classe dentro do estilo-torneios.css e mudar a margin para none

@media only screen and (max-width: 650px) {
div.gallery-torneios {
margin: 0.3em 0;
max-width: 100%;
}

Pois as div das imagens samba muito e as vezes fica torto, com o none evita essa aleatoriedade, dai pensei que assim seria bom, voce decide o que fazer. 

@media only screen and (max-width: 650px) {
div.gallery-torneios {
	margin: 0.3em none;
}

Mas o erro vem desse atributo de % que conflita com o outro ja feito anteriormente definido como max-width: 250px;

div.gallery-torneios {
margin: 0.3em;
border: 0.1em solid #c6c6ff;
float: left;
max-width: 250px;
overflow: hidden;

}

[riomccloud]

@Nix-Alba É um bom início, o problema é que em larguras pequenas essas divs de galeria ultrapassam o limite horizontal do corpo. A largura mínima idealizada para o Acervo SRB2 Brasil é 320px, que parece ser a largura mínima que smartphones menores costumam ter.

[Nix-Alba]

@riomccloud

Espero que isso ajude!

CSS

`
/* GALERIA */

div.gallery-torneios {
margin: 0.3em;
border: 0.1em solid #c6c6ff;
float: left;
max-width: 250px;
overflow: hidden;

}

div.gallery-torneios img {
height: 187px;
object-fit: cover;
width: 250px;
}

div.desc-torneios {
padding: 0.5em;
text-align: center;

}
.gallery-torneios .desc-torneios {
word-wrap: break-word; /* quebra de palavra /
}
/ CONSULTAS DE MÍDIA */

@media only screen and (max-width: 650px) {
div.gallery-torneios {
margin: 0.3em none;
}

`

HTML

`

			<div style="display: flex; flex-wrap: wrap;">
				<div class="gallery-torneios">
					<a href="../../../../../recursos/imagens/torneios/srb2kart/regulares/cbsrb2k/quinta-temporada/1.png">
						<img src="../../../../../recursos/imagens/torneios/srb2kart/regulares/cbsrb2k/quinta-temporada/1.png">
					</a>
					<div class="desc-torneios">Anúncio da<br>competição.</div>
				</div>
				<div class="gallery-torneios">
					<a href="../../../../../recursos/imagens/torneios/srb2kart/regulares/cbsrb2k/quinta-temporada/2.png">
						<img src="../../../../../recursos/imagens/torneios/srb2kart/regulares/cbsrb2k/quinta-temporada/2.png">
					</a>
					<div class="desc-torneios">
						Aviso da proximidade do esgotamento das vagas.
					</div>
				</div>
				<div class="gallery-torneios">
					<a href="../../../../../recursos/imagens/torneios/srb2kart/regulares/cbsrb2k/quinta-temporada/3.png">
						<img src="../../../../../recursos/imagens/torneios/srb2kart/regulares/cbsrb2k/quinta-temporada/3.png">
					</a>
					<div class="desc-torneios">Anúncio do encerramento das inscrições.</div>
				</div>
			</div>
			<!-- Fechando a linha de codigo dos Anuncios -->

`

[riomccloud]

Não funcionou, mas o código que você forneceu me fez reparar na solução:

/* CONSULTAS DE MÍDIA */

@media only screen and (max-width: 650px) {
	div.gallery-torneios img {
		max-width: 100%;
	}

Obrigado!