Cómo ajustar márgenes para evitar cortes de texto en dispositivos móviles

  • Autor Autor Antoniio1
  • Fecha de inicio Fecha de inicio
Antoniio1

Antoniio1

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de 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.
 
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 dijo:
Hola, acabo de realizar ambos cambios pero ninguno dio resultado :C
Hacer clic 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 dijo:
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.
Hacer clic para expandir...
Hola, al hacer eso el resultado es el siguiente:
94027424_1801225390015779_234335150836547584_n.webp
 
Ahora sí lo quité:
Stron dijo:
Es por que no le quitaste el margen al carousel.
CSS: 
@media (max-width: 768px)
.carousel {
    margin-top: 0;
}
Hacer clic para expandir...

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

Y los padding de container-fluid
Insertar CODE, HTML o 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.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba