1

estoy haciendo un reto de front end mentor, y me dan imagenes para el responsive y para desktop, utilice las de desktop y ahora que estoy haciendo el responsive no se como cambiar la imagen, lo que hice primero claramente fue ir a el @media y linkear la imagen, pero no cambia nada, lo que tengo es esto:

HTML:

<section class="info"> // ----> Section que no utilice, lo tengo q borrar
<div class="info-grid">  // ----> Grid
  <div class="info-grid-one">  
    <h2>Transform your brand</h2>
    <p>We are a full-service creative agency specializing in helping brands grow ast.
      Engage your clients through compelling visuals that do most of the marketing for you. </p> // ----> texto
      <button>Learn more</button> // ----> Boton
    </div>
    <div class="info-img-first"></div> // ----> Imagen
    
    <div class="info-img-two"></div> // ---> Imagen
    <div class="info-grid-two">
      <h2>Stand out to the right audience</h2>
      <p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll
        build and extend your brand in digital places. </p> // ----> texto
        <button>Learn more</button> // ----> Boton
      </div>
</div>

Desktop:

section .info-img-first {
width:100%;
height: 100%;
background-position: center;

background-image: url(./images/desktop/image-transform.jpg);
background-size: cover;
}

Responsive:

section .info-img-first {
background-image: url(./images/mobile/image-transform.jpg);

}

No se si tengo que anular de alguna forma la primer imagen en el responsive, intente varias cosas pero no funcionaron, muchas gracias por su ayuda

Saludos

4
  • Pudieras compartir el html también? Commented el 24 jun. 2021 a las 14:28
  • Claro, ahi lo edito Commented el 24 jun. 2021 a las 14:34
  • Listo @JeanGotopo,. agrege unos comentarios para que sea de un entendimiento mas rapido, tengo que mejorar mis estrucutras html y soy concienete :) Commented el 24 jun. 2021 a las 14:36
  • Ok estaré viendo tu problema para darte una solución. Commented el 24 jun. 2021 a las 14:37

1 respuesta 1

0

Debes procurar usar los media-queries para darle adaptabilidad o responsividad según dispositivo. Por otro lado, fíjate como he acomodado width y height para que pueda verse. Fíjate también que no es tan necesario agregar section en el css.

 .info-img-first {
    width: auto;
    height: 100vh;
    background-position: center;

    background-image: url(./images/desktop/image-transform.jpg);
    background-size: cover;
    }
   
@media (max-width: 600px) {
    .info-img-first {
        
        background-size:cover;
        background-image:  url(./images/mobile/image-transform.jpg);
    }
}
<section class="info"> 
        <div class="info-grid">
          <div class="info-grid-one">  
            <h2>Transform your brand</h2>
            <p>We are a full-service creative agency specializing in helping brands grow ast.
              Engage your clients through compelling visuals that do most of the marketing for you. </p> 
              <button>Learn more</button> 
            </div>
            <div class="info-img-first"></div> 
            
            <div class="info-img-two"></div> 
            <div class="info-grid-two">
              <h2>Stand out to the right audience</h2>
              <p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll
                build and extend your brand in digital places. </p>
                <button>Learn more</button> 
              </div>
        </div>
    </section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.