📣 Seu anúncio aqui? Anuncie no ForoBeta

Como ajustar margens para evitar cortes de texto em dispositivos móveis

  • Autor Autor Antoniio1
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
Antoniio1

Antoniio1

Gamma
Verificación en dos pasos activada
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola, buenas. Estoy teniendo un problema al momento de visualizar un texto en un tipo de celular, quisiera saber cómo darle más margen a esta columna para que el texto de arriba no se corte:

margenes.webp


Eso pasa con algunos Samsung y algunos Huawei pero con Iphone se mira así:
desc.webp



Entonces, quiero dar más margen para que en todos los dispositivos se mire igual, qué valores debo agregar con css para hacer eso?

gracias de antemano.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
Url?
 
Cualquier sugerencia sería buena, ya intenté con min-height , max-height, height pero nada lo soluciona
 
Intenta cambiar.
Main:Css:702

CSS: 
@media (max-width: 768px)
.carousel {
    margin-top: 14%;
}
 
Otra cosa que puedes hacer es...
Buscar esto

HTML: 
<div class="item active ">
<img src="https://sanohf.com/img/banner/2/inicialb.png" alt="InicialB">
<div class="carousel-caption">
<div class="row">
<h2>COMIDAS PARA UN ESTILO DE VIDA SALUDABLE<br></h2>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h6>La dieta flexible. Tú dieta perfecta</h6>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12 col-xs-12 text-center">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
<br>
<a href="https://sanohf.com/paquetes">
<button class="btn btn-lg btn-register" type="button">Ver Planes</button>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center"><br>
<a href="https://sanohf.com/menus">
<button class="btn btn-lg btn-register" type="button">Ir al Menú</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

Y cambialo por este

HTML: 
<div class="item active ">
<div class="carousel-caption">
<div class="row">
<h2>COMIDAS PARA UN ESTILO DE VIDA SALUDABLE<br></h2>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<h6>La dieta flexible. Tú dieta perfecta</h6>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12 col-xs-12 text-center">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
<br>
<a href="https://sanohf.com/paquetes">
<button class="btn btn-lg btn-register" type="button">Ver Planes</button>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center"><br>
<a href="https://sanohf.com/menus">
<button class="btn btn-lg btn-register" type="button">Ir al Menú</button>
</a>
</div>
</div>
</div>
</div>
</div>
<img src="https://sanohf.com/img/banner/2/inicialb.png" alt="InicialB">
</div>
 
Hola, acabo de realizar ambos cambios pero ninguno dio resultado :C
 
Antoniio1 disse:
Hola, acabo de realizar ambos cambios pero ninguno dio resultado :C
Clique para expandir...
No se si ya lo resolviste, pero el margen se lo debes agregar al contenedor, No al carrousel, y ese margen debe ser del tamaño del navar(Menu).

CSS: 
.container-fluid.fittogo {
    margin-top: 72px;
}

Si le agregaste margen al carrousel quitaselo para que no te quede un espacio en la cabecera.
 
Stron disse:
No se si ya lo resolviste, pero el margen se lo debes agregar al contenedor, No al carrousel, y ese margen debe ser del tamaño del navar(Menu).

CSS: 
.container-fluid.fittogo {
    margin-top: 72px;
}

Si le agregaste margen al carrousel quitaselo para que no te quede un espacio en la cabecera.
Clique para expandir...
Hola, al hacer eso el resultado es el siguiente:
94027424_1801225390015779_234335150836547584_n.webp
 
Ahora sí lo quité:
Stron disse:
Es por que no le quitaste el margen al carousel.
CSS: 
@media (max-width: 768px)
.carousel {
    margin-top: 0;
}
Clique para expandir...

Es verdad, ya pude acomodarlo, muchas gracias!
 
¿Y si sacas los margin de row?
Inserir CODE, HTML ou PHP: 
.row{
margin-right: -12px;   <----
margin-left: -12px;    <-- Estos
}

Y los padding de container-fluid
Inserir CODE, HTML ou PHP: 
.container-fluid {
padding-right: 15px;  <----
padding-left: 15px;    <---- Estos dos
margin-right: auto;
margin-left: auto;
}

Si todavía estás probando, quizás funcione. 👍

Ya que la "nav bar" sigue muy ancha al achicarse la pantalla.
 
Você precisa estar logado ou cadastrado para responder aqui.

Tópicos similares

alfredomab
Como ajustar margens em modelo simples do Blogger
Respostas
4
Visitas
5K
alfredomab
alfredomab
Voltar
Topo