Home > Software design >  How do I get the image to display in full proportion on @media screen?
How do I get the image to display in full proportion on @media screen?

Time：10-01

I can not get the image area to take full size on a smaller viewport (max-width: 768px) when chaging the flex-item to column

Even under min-width a max-width set up on 100%, the image still shows on on a 760px by a mere 49.59px

I also made sure this would be an overflow issue, the viewport is set to a 100% anyways.

Here is my html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<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="stylesheet" type="text/css" href="./css/styles.css">
    <link rel="stylesheet" type="text/css" href="./css/blog-styles.css">
    <script
              src="https://code.jquery.com/jquery-3.6.0.js"
              integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
              crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Open Sans&family=Poppins&family=Raleway:wght@600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
    <title>Blog</title>

<script type='text/javascript' src=js/templates.js></script>
    
</head>

<body>

<!-- Main Menu Section-->

<my-menu></my-menu>

<!-- about section-->

<section>
<div class="blog-post__cards">
        <div class="blog-post">
            <div class="blog-post__img">
                <img src="/img/post-photo.jpg" alt="">
            </div>
         <div class="blog-post__info">
             <div class="blog-post__date">
                 <span>Sunday</span>
                 <spa>August 18 2021</spa>
             </div>
             <h1 class="blog-post__title">Blog Post Title</h1>
             <p class="blog-post__text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
             </p>
             <a href="#" class="blog-post__cta">Read More</a>
         </div>       
        </div>

        <div class="blog-post">
            <div class="blog-post__img">
                <img src="/img/post-photo.jpg" alt="">
            </div>
         <div class="blog-post__info">
             <div class="blog-post__date">
                 <span>Sunday</span>
                 <spa>August 18 2021</spa>
             </div>
             <h1 class="blog-post__title">Blog Post Title</h1>
             <p class="blog-post__text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
             </p>
             <a href="#" class="blog-post__cta">Read More</a>
         </div>       
        </div>

        <div class="blog-post">
            <div class="blog-post__img">
                <img src="/img/post-photo.jpg" alt="">
            </div>
         <div class="blog-post__info">
             <div class="blog-post__date">
                 <span>Sunday</span>
                 <spa>August 18 2021</spa>
             </div>
             <h1 class="blog-post__title">Blog Post Title</h1>
             <p class="blog-post__text">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!
             </p>
             <a href="#" class="blog-post__cta">Read More</a>
         </div>       
        </div>
    </div>
</section>    



<!-- Main Footer Section-->

<my-footer></my-footer>

</body>

And here I share the corresponding CSS

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*html {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
}
*/
img {
  width: 100%;
}

section {
  font-family: "lato", sans-serif;
  font-size: 10px;
  width: 100%;
  height: 10vp;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #eee;
  padding: 0 15px;
  overflow: scroll;
}

.blog-post__cards {
  width: 100%;
  padding: 5em;
  display: flex;
  align-content: space-around;
  align-items: flex-start;
  flex-direction: column;
  gap: 10em;
  transform: scale(0.95);
}

.blog-post {
  width: 850px;
  height: 350px;
  max-width: 98em;
  padding: 5em;
  background-color: #fff;
  box-shadow: 0 1.4em 8em rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  border-radius: 0.8em;
}

.blog-post__img {
  min-width: 35em;
  max-width: 35em;
  height: 30em;
  transform: translateX(-8em);
  position: relative;
}


.blog-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.8em;
}

.blog-post__img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(79, 172, 254, 0.8),
    rgba(0, 242, 254, 0.8)
  );
  box-shadow: 0.5em 0.5em 3em 1px rgba(0, 0, 0, 0.5em);
  border-radius: 0.8em;
}

.blog-post__date span {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 2em;
  font-weight: 600;
  margin: 0.2em 0;
}

.blog-post__title {
  font-size: 2.5em;
  margin: .8em 0 1em;
  text-transform: uppercase;
  color: #4facfe;
}

.blog-post__text {
  margin-bottom: 3em;
  font-size: 1.4em;
  color: rgba(0, 0, 0, 0.7);
}

.blog-post__cta {
  display: inline-block;
  padding: 1.2em 3em;
  margin-top: 0.5em;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.2em;
  color: #fff;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 0.8em;
  text-decoration: none;
  float: right;
}

.blog-post__cta:hover {
  background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
}

@media screen and (max-width: 1068px) {
  .blog-post {
    max-width: 80em;
  }

  .blog-post__img {
    min-width: 30em;
    max-width: 30em;
  }
}

@media screen and (max-width: 868px) {
  .blog-post {
    max-width: 70em;
  }
}

@media screen and (max-width: 768px) {
  .blog-post {
    padding: 2.5em;
    flex-direction: column;
  }

  .blog-post__img {
    min-width: 100%;
    max-width: 100%;
    transform: translate(0, -4em);
  }
}

Thank you so much for taking a looking a look into this! I am working as much as I can with flex items so any feedback that could be applied to this project would be highly appreciated.

Thank you!

CodePudding user response：

Sometimes it's difficult to try and replicate an issue in Stack Overflow without an editable example. However, I pasted parts of your code into the editor to try and replicate. Are you wanting the image to expand to the entire width of the viewport at your mobile breakpoint? Take a look at my edits and let me know if any of that fixes your issue, and I can write a better description.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*html {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
}
*/
img {
  width: 100%;
}

section {
  font-family: "lato", sans-serif;
  font-size: 10px;
  width: 100%;
  height: 10vp;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #eee;
  padding: 0 15px;
  overflow: scroll;
}

.blog-post__cards {
  width: 100%;
  padding: 5em;
  display: flex;
  align-content: space-around;
  align-items: flex-start;
  flex-direction: column;
  gap: 10em;
  transform: scale(0.95);
}

.blog-post {
  width: 850px;
  height: 350px;
  max-width: 98em;
  padding: 5em;
  background-color: #fff;
  box-shadow: 0 1.4em 8em rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  border-radius: 0.8em;
}

.blog-post__img {
  min-width: 35em;
  max-width: 35em;
  height: 30em;
  transform: translateX(-8em);
  position: relative;
}


.blog-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.8em;
}

.blog-post__img::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(79, 172, 254, 0.8),
    rgba(0, 242, 254, 0.8)
  );
  box-shadow: 0.5em 0.5em 3em 1px rgba(0, 0, 0, 0.5em);
  border-radius: 0.8em;
}

.blog-post__date span {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 2em;
  font-weight: 600;
  margin: 0.2em 0;
}

.blog-post__title {
  font-size: 2.5em;
  margin: .8em 0 1em;
  text-transform: uppercase;
  color: #4facfe;
}

.blog-post__text {
  margin-bottom: 3em;
  font-size: 1.4em;
  color: rgba(0, 0, 0, 0.7);
}

.blog-post__cta {
  display: inline-block;
  padding: 1.2em 3em;
  margin-top: 0.5em;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1.2em;
  color: #fff;
  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  border-radius: 0.8em;
  text-decoration: none;
  float: right;
}

.blog-post__cta:hover {
  background-image: linear-gradient(to right, #00f2fe 0%, #4facfe 100%);
}

@media screen and (max-width: 1068px) {
  .blog-post {
    max-width: 80em;
  }

  .blog-post__img {
    min-width: 30em;
    max-width: 30em;
  }
}

@media screen and (max-width: 868px) {
  .blog-post {
    max-width: 70em;
  }
}

@media screen and (max-width: 768px) {
  section {
    width: 100%;
  }
  .blog-post {
    padding: 0;
    flex-direction: column;
    height: unset;
    max-width: 100%;
  }
  
  .blog-post__cards {
    transform: scale(1);
  }
  .blog-post__cards{
    padding: 0;
  }
  .blog-post__img {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    transform: translate(0, -4em);
  }
  .blog-post__info {
    padding: 0 1rem 2rem;
  }
}
<section>
    <div class="blog-post__cards">
        <div class="blog-post">
            <div class="blog-post__img">
                <img src="https://imagecdn.app/v1/images/https://images.unsplash.com/photo-1525923838299-2312b60f6d69?width=800&height=600" alt="">
            </div>
            <div class="blog-post__info">
                <div class="blog-post__date">
                    <span>Sunday</span>
                    <span>August 18 2021</span>
                </div>
                <h1 class="blog-post__title">Blog Post Title</h1>
                <p class="blog-post__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laudantium, reiciendis ut dolore voluptatibus consequatur quam impedit eligendi sapiente voluptate, molestiae libero quae magni quia. Minima ipsa velit eius aut!</p>
                <a href="#" class="blog-post__cta">Read More</a>
            </div>
        </div>
    </div>
</section>

Page link：https//www.codepudding.com/Softwaredesign/135321.html

Prev:How to show images inside <a> tags inside <div> tags?
Next:Can I use both "Tachyons" and "Bootsrap 5"? [closed]
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding