Como fazer com que o título seja responsivo no celular

sepadios · 24/12/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/12/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/12/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/12/2015

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

Inserir CODE, HTML ou 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/12/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/12/2015

Stylen disse:
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/12/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/12/2015

Stylen disse:
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/12/2015

sepadios disse:
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:

Inserir CODE, HTML ou 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/12/2015

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

Inserir CODE, HTML ou 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 😉

Como fazer com que o título seja responsivo no celular

sepadios

Cicklow

kurosaki

sepadios

Stylen

sepadios

Stylen

sepadios

Jimmyx93

sepadios

Tópicos similares