CODEWITHSUNDEEP
cssflexbox
Dimitri Drivakis
Dimitri Drivakis

Reputation: 77

image and text do not fit when reduced in size with flexbox

I'm trying to do a media query and I'm using flexbox so that the image and text change size when they fit a certain parameter but I don't know how to do it

the section consists of a title and a description and on the right side an image with animation so that it moves up and down

.home{
    display: flex; 
    align-items: center;
    justify-content: center;
    background: url(../images/home-bg-img.png) no-repeat;
    background-size: cover;
    background-position: center;
}

.home .image img{
    width:40vw;
    animation: float 3s linear infinite;
}

@keyframes float{
    0%, 100%{
        transform: translateY(0rem);
    }
    50%{
        transform: translateY(-3.5rem);
    }
}

.home .content h3{
    font-size: 5.5rem;
    color: #333;
    text-transform: uppercase;
}

.home .content p{
    font-size: 1.7rem;
    color: #666;
    padding:1rem 0;
}

the media query consists only of positioning the image at the top and the text at the bottom.

also when it is below 803px the image should be reduced along with the text

@media(max-width:803px){
.home{
        flex-flow: column-reverse;
    }

    .home .image img{
        width:100%;
    }

    .home .content h3{
        font-size: 3.6rem;
    }

    .home .content p{
        font-size: 1.5rem;
    }
   }

The flex-flow: column-reverse; works for me but the text and the image do not change their size

here I leave the html

<section class="home" id="home">
        <div class="content">
            <h3> la mejor aplicacion movil</h3> 
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt laudantium sit pariatur alias. Doloribus atque facilis architecto ex harum porro iste magnam ad, doloremque, obcaecati omnis nisi</p>
            <a href="#" class="btn">Descargalo Ahora</a>
        </div>
        <div class="image">
            <img src="./images/home-img.png" alt="">
        </div>

    </section>

Upvotes: 1

Views: 82

Answers (1)

Anton
Anton

Reputation: 8508

For fonts, you can use the css clamp() function to make the text more flexible.

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. MDN

Also, for the image, we can limit the height and use theobject-fit: cover; property.

.home {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/home-bg-img.png) no-repeat;
  background-size: cover;
  background-position: center;
}

.home .image img {
  width: 40vw;
  animation: float 3s linear infinite;
  height: 350px; /* new line */
  object-fit: cover; /* new line */
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0rem);
  }
  50% {
    transform: translateY(-3.5rem);
  }
}

.home .content h3 {
  font-size: clamp(3.6rem, 5vw, 5.5rem); /* changed */
  color: #333;
  text-transform: uppercase;
}

.home .content p {
  font-size: 1.7rem;
  color: #666;
  padding: 1rem 0;
}

@media (max-width: 803px) {
  .home {
    flex-flow: column-reverse;
  }
  .home .image img {
    width: 100%;
    height: auto; /* new line */
  }
  .home .content h3 {
    font-size: clamp(2rem, 7vw, 3.6rem); /* changed */
  }
  .home .content p {
    font-size: 1.5rem;
  }
}
<section class="home" id="home">
  <div class="content">
    <h3>la mejor aplicacion movil</h3>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt laudantium sit pariatur alias. Doloribus atque facilis architecto ex harum porro iste magnam ad, doloremque, obcaecati omnis nisi
    </p>
    <a href="#" class="btn">Descargalo Ahora</a>
  </div>
  <div class="image">
    <img src="https://dummyimage.com/600x400/dedede/0815c2.jpg" alt="" />
  </div>
</section>

Upvotes: 1

Related Questions