CODEWITHSUNDEEP
htmlcss
anish
anish

Reputation: 19

Image height unresponsive for 768px screen size

I'm trying to make the card component responsive for the @media screen (max-width: 768px) but I'm getting a small image size that is shrunk.

i tried setting the height of the container to different sizes using vh, % but none of it seems to working like I wanted. Please spare some of your time to review the code and help me. Thank you.

Image link for the error:

Image of the issue

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Responsive Card</title>
  </head>

  <body>
    <div class="container">
      <div class="card">
        <div class="card__header">
          <h1>Get <span>insights</span> that help your business grow.</h1>
        </div>
        <div class="card__paragraph">
          <p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
        </div>
        <div class="card__footer">
          <span>
            <h2>10k+</h2>
            <p>Companies</p>
          </span>
          <span>
            <h2>314</h2>
            <p>Templates</p>
          </span>
          <span>
            <h2>12M+</h2>
            <p>Queries</p>
          </span>
        </div>
      </div>
      <div class="img__box">
        <div class="overlay"></div>
      </div>
    </div>
  </body>

</html>

Default Code for Desktop screen:

body {
  background-color: var(--background-color);
  width: 100%;
  height: 100vh;
  color: #fff;
  font-family: var(--body-font);
}

h1,
h2 {
  font-family: var(--header-font);
}

.container {
  position: relative;
  max-width: 1120px;
  height: auto;
  display: flex;
  padding: 25px;
  margin: 10vh auto;
}

.card {
  position: relative;
  background-color: var(--card-background);
  position: relative;
  width: 100%;
  height: auto;
  padding: 3rem;
  border-radius: 6px 0 0 6px;
}

.card__header {
  font-family: var(--header-font);
  font-size: 1.2rem;
  margin-bottom: 25px;
}

.card__header span {
  color: var(--image-overlay);
}

.card__paragraph {
  color: var(--paragraph);
  margin-bottom: 50px;
  line-height: 2rem;
  font-size: 1rem;
}

.card__footer {
  display: flex;
}

.card__footer span {
  margin-right: 3.5rem;
}

.card__footer h2 {
  margin-bottom: 0.4rem;
}

.card__footer p {
  color: var(--paragraph);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

.img__box {
  position: relative;
  background: url(/img/img2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  border-radius: 0px 6px 6px 0px;
}

.img__box .overlay {
  background-color: var(--image-overlay);
  opacity: 0.7;
  width: 100%;
  height: 100%;
  border-radius: 0px 6px 6px 0px;
}

/*Code For making Responsive for screen breakpoint 768px*/
@media screen and (max-width:768px) {
  .container {
    display: flex;
    flex-direction: column-reverse;
    width: 80%;
    height: 100%;
    margin: 50px auto;
  }

  .card {
    width: 100%;
    height: 100%;
    padding: 2rem;
    border-radius: 0 0 6px 6px;
    text-align: center;
    margin-bottom: 50px;
  }

  .img__box {
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0 0;
  }

  .img__box .overlay {
    border-radius: 6px 6px 0 0;
  }

  .card__footer {
    display: block;
  }
}

Upvotes: 0

Views: 375

Answers (1)

Manish Khatri
Manish Khatri

Reputation: 161

Here hope this solves the issue. Snippet won't show the actual result. Try with your code.

body {
  background-color: var(--background-color);
  width: 100%;
  height: 100vh;
  color: #fff;
  font-family: var(--body-font);
  background:#000;
}

h1,
h2 {
  font-family: var(--header-font);
}

.container {
  position: relative;
  max-width: 1120px;
  height: auto;
  display: flex;
  padding: 25px;
  margin: 10vh auto;
}

.card {
  position: relative;
  background-color: var(--card-background);
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 6px 0 0 6px;
}

.card__header {
  font-family: var(--header-font);
  font-size: 1.2rem;
  margin-bottom: 25px;
}

.card__header span {
  color: var(--image-overlay);
}

.card__paragraph {
  color: var(--paragraph);
  margin-bottom: 50px;
  line-height: 2rem;
  font-size: 1rem;
}

.card__footer {
  display: flex;
}

.card__footer span {
  margin-right: 3.5rem;
}

.card__footer h2 {
  margin-bottom: 0.4rem;
}

.card__footer p {
  color: var(--paragraph);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

.img__box {
  position: relative;
  background: url(https://www.gsb.stanford.edu/sites/default/files/styles/1630x_variable/public/build-better-teams-key.jpg?itok=cenTh4Hq);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: auto;
  border-radius: 0px 6px 6px 0px;
}

.img__box .overlay {
  background-color: var(--image-overlay);
  opacity: 0.7;
  width: 100%;
  height: 100%;
  border-radius: 0px 6px 6px 0px;
}

/*Code For making Responsive for screen breakpoint 768px*/
@media screen and (max-width:768px) {
  .container {
    display: flex;
    flex-direction: column-reverse;
    width: 80%;
    height: 100%;
    margin: 50px auto;
  }

  .card {
    width: 100%;
    height: 100%;
    border-radius: 0 0 6px 6px;
    text-align: center;
    margin-bottom: 50px;
  }

  .img__box {
    width: 100%;
    height: 15%;
    border-radius: 6px 6px 0 0;
  }

  .img__box .overlay {
    border-radius: 6px 6px 0 0;
  }

  .card__footer {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Responsive Card</title>
  </head>

  <body>
    <div class="container">
      <div class="card">
        <div class="card__header">
          <h1>Get <span>insights</span> that help your business grow.</h1>
        </div>
        <div class="card__paragraph">
          <p>Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
        </div>
        <div class="card__footer">
          <span>
            <h2>10k+</h2>
            <p>Companies</p>
          </span>
          <span>
            <h2>314</h2>
            <p>Templates</p>
          </span>
          <span>
            <h2>12M+</h2>
            <p>Queries</p>
          </span>
        </div>
      </div> 
      <div class="img__box">
        <div class="overlay"></div>
      </div>
    </div>
  </body>

</html>

Upvotes: 0

Related Questions