Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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> </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></p>
<p></p>
<p></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";*{
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.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
>
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!
Coloca o código aqui. Você usou o @media screen do css?