1

I was wonder if I can get some help with the header image and it responsiveness. Friend of my build this ebay ad template. I've tried to add an image in the header. I've specified width and height of the image due to it size. So far so good, however I've noticed that the header is not responsive. Other pictures included in this template as the examples works with the responsiveness. I was looking for the solution last night here on stackoverflow, but I couldn't get it work. I was wonder if someone could have a look on this code and tell me where I'm making a mistake. I was also thinking that maybe I should scale the image first and then try to code it? Well, I hope that someone will explain it to me.

Thank you for help!

Here is the code for html and css:

 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
*{
    box-sizing: border-box;
}
a{
  margin: 10px 0;
}
#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
    font-family: "Quicksand", sand-serif;
}
  
header {
    height: 100px;
    padding: 0 15px;
}

header h1{
    float: left;
}
ul{
    list-style: none;
    padding: 0;
}
li{
    padding: 5px 0;
}

  
#content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    float: left;
    padding: 5px 15px;
}
#image-wraper{
      width: 50%;
}
#image-wraper img{
    width: 100%;
}
#description{
    padding: 10px 0;
  margin: 10px 0;
}
#description-wraper{
     width: 50%;
}
#description-wraper a, .wraper a{
    text-decoration: none;
    color: white;
    width: 50px;
    height: 40px;
    background-color: black;
    border-radius: 5px;
    padding: 10px;
  margin: 10px 0;
}
#product-carousel{
    display: block;
}
#product-carousel h1{
    padding: 10px 0;
}
#carousel{
    display: flex;
    justify-content: center;
}
#carousel h4{
  margin: 15px 0;
}
.wraper{
    text-align: center;
    align-items: center;   
}
.wraper img{
    width: 50%;
}

footer {
    clear: both;
    padding: 5px 0;
    margin: 10px 0;
}

@media all and (max-width: 700px){
  #pagewrap{
    flex-direction: column;
    flex-grow: 1;
  }
  #content, footer{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header{
      display: flex;
      justify-content: center;
  }
  #carousel{
      
       flex-direction: column;
       
  }
  h1{
     text-align: center;
  }
 a{
     margin-bottom: 20px;
 }
 .wraper img{
     margin-top: 20px;
 }
 

}
<header>
  <div style="text-align: center"> <img style="width: 400px; height: 125px" src="https://i.ibb.co/C5HPytj/Fungimateslogo.png">
</header>
  </div>

<section id="content">
    <div id="image-wraper">
        <img src='https://images.unsplash.com/photo-1545289414-1c3cb1c06238?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'>
    </div>
    <div id="description-wraper">
        <h2>PRODUCT NAME</h2>
        <ul>
            <li><i class="fas fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li><i class="fas fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li><i class="fas fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
        <div id="description">
            <h1>Description of a product</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse sed nisi lacus sed viverra tellus in hac. Facilisi morbi tempus iaculis urna id volutpat lacus. Et ligula ullamcorper malesuada proin. Suspendisse ultrices gravida dictum fusce.
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse sed nisi lacus sed viverra tellus in hac. Facilisi morbi tempus iaculis urna id volutpat lacus. Et ligula ullamcorper malesuada proin. Suspendisse ultrices gravida dictum fusce.</p>
        </div>
        <a href="#">Check out our website</a>
    </div>

</section>

<section id="product-carousel">
    <h1> Best sellers</h1>
    <div id="carousel">
        <div class="wraper">
          <img src="https://images.unsplash.com/photo-1586045509364-0b14f35c814d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
          <h4>Name</h4>
          <a href="#">Product Link</a>
        </div>
        
        <div class="wraper">
          <img src="https://images.unsplash.com/photo-1586045509364-0b14f35c814d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
          <h4>Name</h4>
          <a href="#">Product Link</a>
        </div>
            
        <div class="wraper">
          <img src="https://images.unsplash.com/photo-1586045509364-0b14f35c814d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
          <h4>Name</h4>
          <a href="#">Product Link</a>
        </div>
    </div>
            
</section>

<footer>
  <h4>Information about delivery, company address, ect</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 
      quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
      consectetur
    </p>
</footer>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
Konrad_K
  • 11
  • 2
  • Hello, great first post. Really good that you added the source code so others can directly check out what the problem is. For more clarity in your post, you could add divide your text into sections (like "the problem" and "questions"). Also, the title of this post should describe what the issue is. So instead of "issue of responsive header image" it could be "Header image is not responsive". Otherwise, by adding the following css code to the header image, it should be responsive and have the wanted height and width: ```max-width: 400px; max-height: 125px; width: 100%;``` – OuuGiii Dec 14 '20 at 14:22

1 Answers1

0

For a responsive header image, you just need to specify the max-width: 100% rule for img.

And so, you need to remove the height - height: 125px. This height disturbs the correct proportions of the image.

It should be like this:

<img style="width: 400px; max-width: 100%;" src="https://i.ibb.co/C5HPytj/Fungimateslogo.png">

Now, I think looking good!

Run the code below and see the result.

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
*{
    box-sizing: border-box;
}
a{
  margin: 10px 0;
}
#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
    font-family: "Quicksand", sand-serif;
}
  
header {
    height: 100px;
    padding: 0 15px;
}

header h1{
    float: left;
}
ul{
    list-style: none;
    padding: 0;
}
li{
    padding: 5px 0;
}

  
#content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    float: left;
    padding: 5px 15px;
}
#image-wraper{
      width: 50%;
}
#image-wraper img{
    width: 100%;
}
#description{
    padding: 10px 0;
  margin: 10px 0;
}
#description-wraper{
     width: 50%;
}
#description-wraper a, .wraper a{
    text-decoration: none;
    color: white;
    width: 50px;
    height: 40px;
    background-color: black;
    border-radius: 5px;
    padding: 10px;
  margin: 10px 0;
}
#product-carousel{
    display: block;
}
#product-carousel h1{
    padding: 10px 0;
}
#carousel{
    display: flex;
    justify-content: center;
}
#carousel h4{
  margin: 15px 0;
}
.wraper{
    text-align: center;
    align-items: center;   
}
.wraper img{
    width: 50%;
}

footer {
    clear: both;
    padding: 5px 0;
    margin: 10px 0;
}

@media all and (max-width: 700px){
  #pagewrap{
    flex-direction: column;
    flex-grow: 1;
  }
  #content, footer{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header{
      display: flex;
      justify-content: center;
  }
  #carousel{
      
       flex-direction: column;
       
  }
  h1{
     text-align: center;
  }
 a{
     margin-bottom: 20px;
 }
 .wraper img{
     margin-top: 20px;
 }
 

}
<header>
  <div style="text-align: center"> <img style="width: 400px; max-width: 100%;" src="https://i.ibb.co/C5HPytj/Fungimateslogo.png">
</header>
  </div>

<section id="content">
    <div id="image-wraper">
        <img src='https://images.unsplash.com/photo-1545289414-1c3cb1c06238?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'>
    </div>
    <div id="description-wraper">
        <h2>PRODUCT NAME</h2>
        <ul>
            <li><i class="fas fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li><i class="fas fa-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li><i class="fas fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li><i class="fas fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
        <div id="description">
            <h1>Description of a product</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse sed nisi lacus sed viverra tellus in hac. Facilisi morbi tempus iaculis urna id volutpat lacus. Et ligula ullamcorper malesuada proin. Suspendisse ultrices gravida dictum fusce.
                <br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse sed nisi lacus sed viverra tellus in hac. Facilisi morbi tempus iaculis urna id volutpat lacus. Et ligula ullamcorper malesuada proin. Suspendisse ultrices gravida dictum fusce.</p>
        </div>
        <a href="#">Check out our website</a>
    </div>

</section>

<section id="product-carousel">
    <h1> Best sellers</h1>
    <div id="carousel">
        <div class="wraper">
          <img src="https://images.unsplash.com/photo-1586045509364-0b14f35c814d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
          <h4>Name</h4>
          <a href="#">Product Link</a>
        </div>
        
        <div class="wraper">
          <img src="https://images.unsplash.com/photo-1586045509364-0b14f35c814d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
          <h4>Name</h4>
          <a href="#">Product Link</a>
        </div>
            
        <div class="wraper">
          <img src="https://images.unsplash.com/photo-1586045509364-0b14f35c814d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
          <h4>Name</h4>
          <a href="#">Product Link</a>
        </div>
    </div>
            
</section>

<footer>
  <h4>Information about delivery, company address, ect</h4>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
      veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 
      quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
      ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
      consectetur
    </p>
</footer>
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25