Cambiar imagen solo en el movil

  • Resuelto nitarocker

    (@nitarocker)


    hace 1 año, 2 meses

    Como cambio el tamaño y la posición de la imagen solo para iPhone y iPad?
    y como cambio el espacio top bottom de un banner texto solo en iPhone y iPad?

    Gracias!!

    • Este debate fue modificado hace 1 año, 2 meses por nitarocker.
Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • Moderador almendron

    (@almendron)

    hace 1 año, 2 meses

    Tienes que usar Media Queries y establecer esa propiedad en función del dispositivo.

    https://lenguajecss.com/css/responsive-web-design/media-queries/

    Iniciador del debate nitarocker

    (@nitarocker)

    hace 1 año, 2 meses

    He leido todo, y tengo un css pero me cambia toda la fuente de toda la web menos el titulo de arriba que es un H1 y no un <p>.

    Lo que quiero es cambiar el tamaño de BLA BLA BLA en el movil a mas pequeño.

    De que manera puedo cambiar la foto tambien en el movil?

    /* Estilos para el texto en dispositivos de escritorio */
p {
font-size: 14px;
}

/* Estilos para el texto en dispositivos móviles */
@media only screen and (max-width: 767px) {
p {
font-size: 12px; 
}
}
    <!-- wp:cover {"url":"http://www.****.com/wp-content/uploads/2023/07/iStock-1005753166.jpg","id":58,"dimRatio":10,"focalPoint":{"x":0.42,"y":0.59},"minHeight":1000,"minHeightUnit":"px","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->

<div class="wp-block-cover alignfull is-light" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:1000px" id="home"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span>

<img class="wp-block-cover__image-background wp-image-58" alt="" src="http://www.****.com/wp-content/uploads/2023/07/iStock-1005753166.jpg" style="object-position:42% 59%" data-object-fit="cover" data-object-position="42% 59%"/>

<div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","level":1,"style":{"spacing":{"margin":{"right":"0px","bottom":"0px","left":"0px","top":"120px"},"padding":{"top":"2.5rem","right":"0px","bottom":"5px","left":"10px"}},"typography":{"letterSpacing":"3px","fontSize":"44px"}}} -->


<h1 class="wp-block-heading has-text-align-left" style="margin-top:120px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:2.5rem;padding-right:0px;padding-bottom:5px;padding-left:10px;font-size:44px;letter-spacing:3px">BLABLA BLA</h1>

<!-- /wp:heading -->
    • Esta respuesta fue modificada hace 1 año, 2 meses por nitarocker.
    Moderador almendron

    (@almendron)

    hace 1 año, 2 meses

    @media only screen and (max-width: 767px) {
Como ene le ejemplo de "p" que has puesto, aquí pones las reglas que se aplicarán a cualquier dispositivo cuya anchura sea inferior a 767px
}

    Ahora bien, tienes que determinar a qué le aplicas los cambios.

    Indica la URL donde quieres hacerlo y le echo un vistazo.

    Iniciador del debate nitarocker

    (@nitarocker)

    hace 1 año, 2 meses

    http://www.heliiblueeairr.com

    Borra las letras duplicadas.

    Gracias!

    Moderador almendron

    (@almendron)

    hace 1 año, 1 mes

    ¿Qué borre el qué???????

    Esto no es un juego. Los que te responden somos voluntarios que intentamos ayudar en la medida de los posible.

    ¿Que no quieres poner la URL de tu sitio? Pues te buscas un profesional, le pagas y asunto liquidado.

    Además, lo del CSS te lo han explicado muy bien en otro hilo que tienes abirto.

    Iniciador del debate nitarocker

    (@nitarocker)

    hace 1 año, 1 mes

    Buenas. Lo siento, no era era mi intencion, me da un poco miedo que si al poner la web aqui va a salir en los navegadores españoles, nada mas.

    La web es http://www.heliblueair.com

    Estoy intentando hacer que el titulo de HELI BLUE AIR salga mas pequeño en el movil.

    Gracias por adelantado y siento el mal entendido.

    Moderador almendron

    (@almendron)

    hace 1 año, 1 mes

    Quieras o no, tu web saldrá en los navegadores de cualquier país.

    1. Accede a tu sitio
    2. Clic con el botón derecho en cualquier punto en blanco
    3. Selecciona «Inspeccionar»
    4. En la pestaña «Inspector» tendrás a la izquierda la estructura de la web y a la derecha sus propiedades CSS. Cuando seleccionas un elemento de la izquierda, sus propiedades aparecen a la derecha.
    5. En la misma barra donde parecen las pestañas (Inspector, Consola. ,,,) fíjate en el lado derecho. Hay un icono que al hacer clic en él pasas a versión móvil. Incluso podrás seleccionar el tipo de movil.
    6. Localiza la imagen cuyas propiedades quieres cambiar y haz que quede seleccionada en la parte izquierda. Ahora en la parte de la derecha puedes cambiar «en vivo» sus propiedades y ver como queda. Incluso puedes añadir nuevas reglas css.
    7. Una vez tengas los cambios, solo tienes que aplicarlos usando además las Media Queries.
Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • El debate ‘Cambiar imagen solo en el movil’ está cerrado a nuevas respuestas.