Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


×

Informação importante

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