CODEWITHSUNDEEP
htmlcss
TheRealJohnDoe
TheRealJohnDoe

Reputation: 65

How can i make my box of image responsive using HTML and CSS

I'm trying to build a simple HTML and CSS card, I have a container that contains box-image and body-card, and the design work perfectly on the desktop version but when I arrived at my breakpoint of media query my image it not shrinking with the container, I don't want the image to pass the container when I change the width of the viewport. I'm looking for the best practice :D

HTML

<section class="card">
    <div class="card-container">
        <div class="box-img">
            <img src="./images/drawers.jpg" alt="decor"/>
        </div>

        <div class="body-card">
            <h1> Shift the overall look and feel by adding these wonderful 
                touches to furniture in your home</h1>
            <p>Ever been in a room and felt like something was missing? Perhaps 
                it felt slightly bare and uninviting. I’ve got some simple tips 
                to help you make any room feel complete.</p>

            <div class="author">
                <img src="./images/avatar-michelle.jpg" alt="">
                <div class="author-info">
                    <h4>Michelle Appleton</h4>
                    <small>20 April 2021</small>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

body {
  font-family: "Manrope", sans-serif;
  margin: auto;
  background-color: hsl(210, 46%, 95%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.card-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1140px;
  width: 95vw;
  background-color: #fff;
  border-radius: 15px;
}

.box-img {
  position: relative;
  width: 540px;
  height: 442px;
}

.box-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 15px 0px 0px 15px;
}

.body-card {
  position: relative;
  padding: 2rem 4rem 2rem 3rem;
  max-width: 600px;
}

MediaQuery

@media (max-width: 992px) {
  .card-container {
    flex-direction: column-reverse;
    width: 65vw;
  }

  .box-img {
    width: 602px;
    height: 308px;
  }
}

This is the problem enter image description here

Upvotes: 1

Views: 206

Answers (3)

Rounin
Rounin

Reputation: 29521

You're almost there, but you need to make a few small changes:

  • your section really ought to have an explicit display declaration
  • you could give section a display: block but it makes more sense simply to move display: flex; justify-content: center; align-items: center; down from body to section
  • in a couple of places you've used width for elements with a flex-parent - but the whole idea is that these flex-children elements should have flexible dimensions, so use flex: [expand tendency] [shrink tendency] [start-width] instead

Working Example:

N.B. Use the Full Page link to see the full effect

body {
  font-family: "Manrope", sans-serif;
  margin: auto;
  background-color: hsl(210, 46%, 95%);
  min-height: 100vh;
}

section.card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 15px;
}

.box-img {
  position: relative;
  display: block;
  flex: 0 1 540px;
  max-height: 442px;
}

.box-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 15px 0px 0px 15px;
}

.body-card {
  position: relative;
  padding: 2rem 4rem 2rem 3rem;
  max-width: 600px;
}

@media (max-width: 992px) {
  .card-container {
    flex-direction: column-reverse;
    width: 65vw;
  }

  .box-img {
    flex: 0 1 602px;
    max-height: 308px;
  }
}
<section class="card">
    <div class="card-container">
        <div class="box-img">
            <img src="https://picsum.photos/540/442" alt="decor"/>
        </div>

        <div class="body-card">
            <h1> Shift the overall look and feel by adding these wonderful 
                touches to furniture in your home</h1>
            <p>Ever been in a room and felt like something was missing? Perhaps 
                it felt slightly bare and uninviting. I’ve got some simple tips 
                to help you make any room feel complete.</p>

            <div class="author">
                <img src="./images/avatar-michelle.jpg" alt="">
                <div class="author-info">
                    <h4>Michelle Appleton</h4>
                    <small>20 April 2021</small>
                </div>
            </div>
        </div>
    </div>
</section>

Further Reading:

Upvotes: 0

Leena
Leena

Reputation: 239

If you want the image to have the same size as the card then use width:100%;. This will change the width of the image to the width of the container.

What you have to change is written below ->

@media (max-width: 992px) {
  .card-container {
    flex-direction: column-reverse;
    width: 65vw;
  }

  .box-img {
    width: 602px; <--- Remove
    width:100%; <---- Add
    height: 308px;
      }
    }

Upvotes: 1

Squiggs.
Squiggs.

Reputation: 4474

Just set your width to 100%?

body {
  font-family: "Manrope", sans-serif;
  margin: auto;
  background-color: hsl(210, 46%, 95%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.card-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1140px;
  width: 95vw;
  background-color: #fff;
  border-radius: 15px;
}

.box-img {
  position: relative;
  width: 540px;
  height: 442px;
}

.box-img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 15px 0px 0px 15px;
}

.body-card {
  position: relative;
  padding: 2rem 4rem 2rem 3rem;
  max-width: 600px;
}

@media (max-width: 992px) {
  .card-container {
    flex-direction: column-reverse;
    width: 65vw;
  }

  .box-img {
    width: 100%;
  }
}
<section class="card">
    <div class="card-container">
        <div class="box-img">
            <img src="https://images.unsplash.com/photo-1531171596281-8b5d26917d8b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="decor"/>
        </div>

        <div class="body-card">
            <h1> Shift the overall look and feel by adding these wonderful 
                touches to furniture in your home</h1>
            <p>Ever been in a room and felt like something was missing? Perhaps 
                it felt slightly bare and uninviting. I’ve got some simple tips 
                to help you make any room feel complete.</p>

            <div class="author">
                <img src="./images/avatar-michelle.jpg" alt="">
                <div class="author-info">
                    <h4>Michelle Appleton</h4>
                    <small>20 April 2021</small>
                </div>
            </div>
        </div>
    </div>
</section>

Upvotes: 2

Related Questions