Jump to content
BelleFisio

Responsividade: Pagina com Textos e Imagens

Recommended Posts

Olá! Bom dia.

 

Estou fazendo uma página em html e css, a página contem textos e imagens (tem um título, abaixo uma foto, depois o corpo do texto (com parágrafos), mais 2 fotos posicionadas a esquerda (com uma legenda abaixo da foto) e utilizei um span ao lado das fotos para explicar mais detalhadamente a imagem (tipo um comentário ou explicação do texto). Usei divs para conter os espaçõs etc.

 

Optei por fazer essa página à parte (fora do layout do meu site para depois acoplá-lo ao meu template) fiz isso para formatar os estilos e o texto de forma mais fácil. Até ai tudo bem, a pagina no navegador  redimensiona (obs. nessa pagina eu não coloquei responsividade ela esta redimensionando naturalmente, porém as fotos ficam bem pequenas em telas menores, e os comentários do texto (que ficam na tag span) diminuem de modo que não é possível ler, porém mantém toda a estrutura da página (igual na tela do desktop). Ou seja os textos de comentários das fotos não quebram a estrutura para descer abaixo da foto e manter o tamanho legível. 

 

Já ao inserir o texto ao layout do site ele redimensiona  de forma desordenada e os textos se misturam e perco margens (os textos e as imagens ficam no limite da página ou seja ficam sem margens e dificulta a leitura)

 

Eu tentei colocar no css as definições de estilos para os tamanhos de telas que queria, mas a página não responde as definições de responsividade. Alguém poderia me auxíliar nessa questão?

 

Agradeço a atenção.  

 

 

Share this post


Link to post
Share on other sites

Sim,  eu utilizei o @media only screen and (max-width:  769px) e outros tamanhos de tela, mas não funcionou

 

Cod.  da parte do HTML:
 

<div class="texto">

<div class= "wrap_texto">

<div class="sub_wrap_texto"> 

<section class="corpo_texto" id="corpo_texto">
<h1>TÍTULO DO TEXTO</h1>
<img class="head_text" src="img_texto/03.jpg" width="900" height="280">
<h4> 
legenda da foto
</h4>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea numquam odio voluptate. Aliquam incidunt similique, et quasi ducimus quos aut autem non dignissimos dicta sit provident, voluptatibus ut blanditiis perspiciatis cum, vel temporibus minima enim. Asperiores omnis placeat officiis a tenetur sit recusandae, reprehenderit neque. Tempora quibusdam, perferendis id ratione culpa dolorum! Nemo, animi? Eveniet eaque perspiciatis, libero quia, pariatur iusto, ipsum porro quod, ut tempora cum quo non illum. Non eligendi incidunt sequi, molestias quia perspiciatis architecto repudiandae quod.
</p> 

<p>
Lorem ipsum..
</p>    

<p>
Lorem ipsum..
</p>

<p>
Lorem ipsum...
</p>


<li>
<img src="img_texto/01.jpg" width="399" height="268"> 

<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea numquam odio voluptate. Aliquam incidunt similique, et quasi ducimus quos aut autem non dignissimos dicta sit provident, voluptatibus ut blanditiis perspiciatis cum, vel temporibus minima enim. Asperiores omnis placeat officiis a tenetur sit recusandae, reprehenderit neque. Tempora quibusdam, perferendis id ratione culpa dolorum! Nemo, animi? Eveniet eaque perspiciatis, libero quia, pariatur iusto, ipsum porro quod, ut tempora cum quo non illum. Non eligendi incidunt sequi, molestias quia perspiciatis architecto repudiandae quod.
</span>

<li>
<h5>legenda da foto</h5>

<br>
<p>
 Lorem ipsum...
</p>

<li>
<img src="img_texto/02.jpg" width="399" height="268"> 

<span>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea numquam odio voluptate. Aliquam incidunt similique, et quasi ducimus quos aut autem non dignissimos dicta sit provident, voluptatibus ut blanditiis perspiciatis cum, vel temporibus minima enim. Asperiores omnis placeat officiis a tenetur sit recusandae, reprehenderit neque. Tempora quibusdam, perferendis id ratione culpa dolorum! Nemo, animi? Eveniet eaque perspiciatis, libero quia, pariatur iusto, ipsum porro quod, ut tempora cum quo non illum. Non eligendi incidunt sequi, molestias quia perspiciatis architecto repudiandae quod.
</span>
</li>
<h5>legenda da foto</h5>


</section>

</div>
</div>

</div>

 CSS:

@charset "utf-8";
/* CSS Document */


*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}




/* DEFINE ESTILOS DO TEXTO: H1 - PARAGRÁFO E SPAN */
#texto{
	
	width:100%;
	max-width:1000px;
	alignment-adjust:central;
	margin:50px auto;
	
	
}




/* ESTILOS DA DIV DO TEXTO*/
.wrap_texto{
	width: 90%;
	max-width: 1200px;
	margin:20px auto;
	
}

.sub_wrap_texto{
	width: 1100px;
    height: auto;
    margin: 0px auto;
    display: flex;

    background:#F8F8F8;
    border-radius: 15px;
    overflow: hidden;
 
	box-shadow: 5px 10px 30px 0px rgba(0,0,0,0.70);
}

/*##############################################################################*/



#corpo_texto{
	width:900px;
	margin:50px auto;	
}

#corpo_texto h1{
	font-family:Verdana, Geneva, sans-serif;
	font-size:20px;
	font-weight:bold;
	color:#0D0D0D;
	text-align:center;
	margin-top:30px;
	margin-bottom:40px;
}


#corpo_texto h4{
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#0D0D0D;
	text-align:center;
	margin-top:5px;
	margin-bottom:50px;
}

#corpo_texto h3{
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#0D0D0D;
	text-align:center;
	margin-top:5px;
	margin-bottom:50px;
}

#corpo_texto h5{
	width:400px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight: 600;
	color:#0D0D0D;
	text-align: center;
	margin-top:3px;
	margin-bottom:30px;
	margin-left:10px;
}


#corpo_texto p{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#666363;
	font-weight:400;
	text-indent:2em;
	text-align: justify;
	margin:30px auto;
	line-height:140%;

}

#corpo_texto span{
	width:100%;
	max-width:400px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#666363;
	font-weight:400;
	text-align:justify;
	display:flex;
	float:right;
	margin:30px auto;
	margin-right:20px;
	line-height:140%;
}


#corpo_texto li{
	list-style:none;
	
}

#corpo_texto li img{
	border: none;
	border-radius:10px;
	box-shadow: 5px 10px 30px 0px rgba(0,0,0,0.30);
	margin-top:15px;
	margin-bottom:5px;
	margin-top:10px auto;
	margin-bottom:1px;
	margin-left:10px;
}


/*######################################################################################*/



/* DEFINE ESTILO DA IMAGEM DO CABEÇALHO DO TEXTO*/
.head_text{
	width:100%;
	height:auto;
	border: none;
	border-radius:10px;
	box-shadow: 5px 10px 20px 0px rgba(0,0,0,0.70);
	margin-top:15px;
	margin-bottom:5px;
}

 

Obrigada pela atenção.

Share this post


Link to post
Share on other sites

Ola, tenta utilizar max-width: 100% ou outro valor no lugar do 100%

 

Uma dica se voce quiser criar um site responsivo eu aconselho utilizar porcentagem se nao entendeu procura ai na internet site fluido

Share this post


Link to post
Share on other sites
13 horas atrás, Jgustavo25 disse:

Ola, tenta utilizar max-width: 100% ou outro valor no lugar do 100%

 

Uma dica se voce quiser criar um site responsivo eu aconselho utilizar porcentagem se nao entendeu procura ai na internet site fluixo

Obrigada!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Wanderson Moreira
      Opa, blz?
      Alguém me da um help?
       
      Estou criando um relatorio em PDF com o dompdf e ao adicionar algumas imagens no documento, as mesmas saem deitadas.
       
      No html as fotos saem com a orientação normal(em pé) conforme foi inserida
       
      alguém sabe o que pode ser?
    • By Wanderson Moreira
      Opa, blz?
      Alguém me da um help?
       
      Estou criando um relatorio em PDF com o dompdf e ao adicionar algumas imagens no documento, as mesmas saem deitadas.
       
      No html as fotos saem com a orientação normal(em pé) conforme foi inserida
       
      alguém sabe o que pode ser?
    • By jvb
      Olá povo do código, eu confesso que estou sem saber o pq de algumas propriedades do Bootstrap 4.2.1 como por exemplo:
      .img-fluid { max-width:100%; height: auto } não funcionar em outra folha de style, que não seja Bootstrap, a propriedade não esta dentro de @media, essa propriedade eu imaginava ser de uso geral.
      Vejamos que a Página continua linkando para o bootstrap, apenas algumas propriedades não terem efeito em outra folha de styles. 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.