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

[Antoniio1]

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:

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

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.

 

[CANIBAL]

Url?

 

[Antoniio1]

Inicio - Sano Healthy Food

Sano - Healthy Food. Alimentación saludable. No hacemos dieta, cambiamos tu estilo de vida.

sanohf.com

 

[Antoniio1]

Cualquier sugerencia sería buena, ya intenté con min-height , max-height, height pero nada lo soluciona

 

[CANIBAL]

Intenta cambiar.
Main:Css:702

@media (max-width: 768px)
.carousel {
    margin-top: 14%;
}

 

[CANIBAL]

Otra cosa que puedes hacer es...
Buscar esto

<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

<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>

 

[Antoniio1]

Hola, acabo de realizar ambos cambios pero ninguno dio resultado :C

 

[Stron]

Hola, acabo de realizar ambos cambios pero ninguno dio resultado :C

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).

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

Si le agregaste margen al carrousel quitaselo para que no te quede un espacio en la cabecera.

 

[Antoniio1]

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).

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

Si le agregaste margen al carrousel quitaselo para que no te quede un espacio en la cabecera.

Hola, al hacer eso el resultado es el siguiente:

 

[Stron]

Hola, al hacer eso el resultado es el siguiente:
Ver el archivo adjunto 246165

Es por que no le quitaste el margen al carousel.

@media (max-width: 768px)
.carousel {
    margin-top: 0;
}

 

[Antoniio1]

Ahora sí lo quité:

Es por que no le quitaste el margen al carousel.

@media (max-width: 768px)
.carousel {
    margin-top: 0;
}

Es verdad, ya pude acomodarlo, muchas gracias!

 

[zcriptz]

¿Y si sacas los margin de row?

.row{
margin-right: -12px;   <----
margin-left: -12px;    <-- Estos
}

Y los padding de container-fluid

.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.