Cómo hacer que el título sea responsive en móvil

sepadios · 24 Dic 2015

Hola! a ver si alguien puede ayudarme ya que ando un poco liado con este tema, el problema es que hay un titulo en mi pagina que en el móvil ocupa 2 lineas, osea se baja el texto y queda mal, sin embargo, en el pc se ve perfectamente en una linea y no se descuadra, si le bajo el tamaño de la fuente, en el móvil se ve bien en una linea pero en el pc muy pequeño!

Hay alguna manera de poder modificar solo el texto del móvil?

Espero haberme explicado bien xd muchas gracias

Cicklow · 24 Dic 2015

usa VW en ves de PX para el tamaño de la fuente, eso hace que sea responsive...
https://css-tricks.com/viewport-sized-typography/

kurosaki · 27 Dic 2015

estoy con la respuesta de arriba.
Aunque tambien puedes asignar valores definidos en pixeles, que cambien dependiendo la resolucion de la pantalla, usando media queries.

HTML:

/*pc*/
p {font-size:24px;}

/*movil y tablets*/
@ media(max-width:720px) {
     p {font-size:16px}
}

saludos

sepadios · 28 Dic 2015

Gracias, pero ando un poco verde! a ver si me pueden ayudar, mi codigo de ese boton en concreto es:

Insertar CODE, HTML o PHP:

media="all"
.advance-search .search-heading {
    background-color: #394041;
    color: #dedee0;
    font-size: 21px;
    line-height: 48px;
    min-height: 53px;
    margin: 0;
    padding-right: 50px;
    position: absolute;
    top: -53px;
    left: 0;
    text-transform: capitalize;
    z-index: 999;

Como debo añadirle el código media queries? muchas gracias!

Stylen · 28 Dic 2015

HTML:

@media (max-width:720px) {
.advance-search .search-heading {
    font-size: 16px;
}

añade ese codigo y el font-size lo vas cambiando hasta que tengas el que mas se ajuste y te guste su tamaño.

sepadios · 28 Dic 2015

Stylen dijo:
HTML:

@media (max-width:720px) { .advance-search .search-heading { font-size: 16px; }

añade ese codigo y el font-size lo vas cambiando hasta que tengas el que mas se ajuste y te guste su tamaño.

Hola! gracias, donde añado exactamente ese codigo? lo he agregado en el main.css que es donde tengo el codigo de .advance-search .search-heading { lo pongo justo arriba y la pagina se descuadra por todo los lados!

Stylen · 28 Dic 2015

Si quieres mandame la url de la pagina por aca o por privado para yo probar con mi firebug por ensayo y error y te paso el código como debería ser. puede ser que algo mas interfiera.

sepadios · 29 Dic 2015

Stylen dijo:
Si quieres mandame la url de la pagina por aca o por privado para yo probar con mi firebug por ensayo y error y te paso el código como debería ser. puede ser que algo mas interfiera.

Vale! La página es thebestcostablanca.fr, la frase que tiene que quedar en una linea en el movil es "Trouvez Votre Propriété" pero claro debería quedarse como está en el ordenador, a ver si le puedes pegar un vistazo, te lo agradezco, muchas gracias!

Jimmyx93 · 29 Dic 2015

sepadios dijo:
Vale! La página es thebestcostablanca.fr, la frase que tiene que quedar en una linea en el movil es "Trouvez Votre Propriété" pero claro debería quedarse como está en el ordenador, a ver si le puedes pegar un vistazo, te lo agradezco, muchas gracias!

Añade esto a tu css al final del todo:

Insertar CODE, HTML o PHP:

@media (max-width:720px) {
.advance-search .search-heading {
font-size: 3vw !important;
}

De esta forma lo adaptas a móviles más pequeños 😉 Espero que te sirva Saludos

sepadios · 29 Dic 2015

Jimmyx93 dijo:
Añade esto a tu css al final del todo:

Insertar CODE, HTML o PHP:

@media (max-width:720px) { .advance-search .search-heading { font-size: 3vw !important; }

De esta forma lo adaptas a móviles más pequeños 😉 Espero que te sirva Saludos

Perfecto!! va de maravilla, muchísimas gracias 😉

Cómo hacer que el título sea responsive en móvil

sepadios

Cicklow

kurosaki

sepadios

Stylen

sepadios

Stylen

sepadios

Jimmyx93

sepadios

Temas similares