Ir para conteúdo
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.  

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.