CSS Preciso deixar um texto exatamente na parte inferior da foto e responsivo.

[Marcos A.A]

Eu facilmente consigo deixar o texto dentro da imagem, sq n consigo fixar esse texto exatamente na parte inferior da imagem de um jeito que fique na parte inferior mesmo se for mobile.

[Leonardo0308]

Bom dia @Marcos A.A

 

Talvez esse LINK possa te ajudar

[Marcos A.A]

No site mais básico de todos sobre desenvolvimento web, eu me matando aqui cara euheueu mds do ceu, obrigado por ajudar na minha burrice. 

[Leonardo0308]

De nada, as vezes acontece da gente esquecer mesmo kkkk

[Marcos A.A]

Ele fico solto dentro do container, ai eu arrumo a parte do bottom, so que no mobile ele n fica fixo.

[Leonardo0308]

Você arrumou os "position: absolute" do texto? caso sim, já tentou por porcentagem para o texto sempre se mover com a imagem?

 

Qual quer coisa também posta o código que a gente pode tentar te ajudar melhor.

[Marcos A.A]

<?php
		# fazendo a pesquisa de todas as categorias cadastradas
		# ordenados por titulo em ordem crescente
		$rs = $con->query("SELECT * FROM **** ORDER BY ****** DESC LIMIT 6");
		# verificando se retornou algo do banco de dados
		if($rs->rowCount() > 0){
			# percorre o resultado vindo do banco de dados e exibe na tela em
			# forma de tabela
			while($linha = $rs->fetch(PDO::FETCH_OBJ)){

				$patch  = "****/****/";

				$**** = $linha->****;
				$**** = $linha->****;
				$**** = $linha->****;
				$**** = $linha->****;
	?>

		<div class="destaque-home col s12 m4 center-align">
			<img class="imagem-destaque" alt="Normay" src="<?=$patch . $****?>">
			<figcaption class="titulo-destaque"><?=$*****?></figcaption>
			<br>
			<?php  
			
			//Qualquer dispositivo movel
			if ( $detect->isMobile() ) {  ?>
				<h6 class="sub-texto flow-text" style="text-align: justify;">Lumina nubes. Sui eodem quia. Mixta pendebat stagna. Montes nunc posset:. Pronaque terram. Duae ardentior imagine mollia occiduo terras. Fulgura aequalis contraria.</h6>
			<?php  
				}
				else {
					?><h6 class="sub-texto flow-text">Lumina nubes. Sui eodem quia. Mixta pendebat stagna. Montes nunc posset:. Pronaque terram. Duae ardentior imagine mollia occiduo terras. Fulgura aequalis contraria.</h6>
			<?php  
				}
			?>

			
		
		</div>	

			<?php
							}
						# caso não tenha nenhum retorno, deverá exibir não foi encontrado
						# nenhum registro
						}else{
					?>
					<tr>
						<td colspan="4">Nenhum registro encontrado</td>
					</tr>
					<?php
						}
					?>

O primeiro é o html, o segundo css. coloquei "****" Por causa do contrato de confidencialidade.

div.container div.row div.destaque-home {
		position: relative;
    	text-align: center;
	}
div.container div.row div.destaque-home figcaption.titulo-destaque {
		position: absolute;
		background-color: #016AB4;
		color: white;
		padding-left: 0.7%;
		padding-right: 0.7%;
	    bottom: 6px;
	    left: 11px;

	}
h6.sub-texto {
		font-size: 14px;
		margin-top: 0;	
		width: 100%;
		text-align: left;
		position: absolute;
	}

 

[DiF]

@Marcos A.A Creio que não vai funcionar do jeito que você espera desta forma.

 

A solução do @Leonardo0308  é válida. Mas para ela funcionar de forma certa, no seu caso, é necessário acrescentar as media queries, para responsividade.

 Veja que você precisa posicionar o elemento com position absolute, no caso o bottom e o left.   Então é aí que entra a media querie.  Você define uma regra para a resolução desktop e outra regra igual, mudando a posição do bottom e do left para se adequar as resoluções do mobile!

 

 

[Marcos A.A]

@DiF  Ja resolvi amigo, mas valeu pela dica 

[DiF]

@Marcos A.A OK, então por gentileza, poderia postar a sua solução encontrada?  Assim você vai ajudar outras pessoas que estiverem na mesma dúvida! 

[Marcos A.A]

Criar outra div e colocar a imagem e o titulo dentra da div, e o sub texto fora. e css --->

 

 

div-que-entra-a-imagem-e-tiutlo {
	position: relative;
}
.titulo-na-imagem {
  position: absolute;
  background-color: #016AB4;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
  bottom: 3%; /*Bottom muda dependendo do tamanho da imagem*/

}
.img {
  position: relative
}

 

adicionado 1 minuto depois

So que tenho outra duvida sobre um problema que isso causou, vou abrir outra enquete.

[DiF]

@Marcos A.A Obrigado por compartilhar a sua solução.

 

3 horas atrás, Marcos A.A disse:

So que tenho outra duvida sobre um problema que isso causou, vou abrir outra enquete.

Não precisa abrir enquete. Basta usar este mesmo tópico se a dúvida for referente ao mesmo projeto.