I can't resize image without breaking my website

user_5309926 0
Viewed 55

I recently started FCC and I am trying to do the first project(Tribute Page) I'm not sure how "good" my code is so I would also appreciate feedback on that, but my main issue is that whenever I'm trying to make my image responsive using

max-width: 100%; 
display:block; 
height: auto;

but it makes picture big to the point where text that's suppose to be below comes on top of the image, I'm not sure why it happens, aren't block level elements not suppose to collide in such way? Here is my codepen link, Thanks! https://codepen.io/spccbw/pen/VwLQPjv

*{
margin: 0px;
padding: 0px;
}
#banner{
  border: 1px solid red;
  background-color:yellow;
  height: 90px;
  width: 100%;
}
h1, h2{
  text-align:center;
  font-family: Arial;
  margin-top: 10px;
  color: red;
  
}
#image{
  max-width: 100%; 
  display:block; 
  height: auto;
  margin: 0 auto;
  
  
}

#img-div {
  width: 100%;
  padding-top: 20px;
  border: 2px solid green;
  background-color: #e8dd5f;
}
#img-caption{
  margin-top: 5px;
  font-family: Arial;
  font-weight: bold;
  text-align:center;
}
#tribute-info{
  padding-top: 10px;
  background-color: #ede7a6;
}
#tribute-info p{
  display:block;
  font-size: 30px;
  text-align:center;
}
ul{
  
  list-style-type:none;
  margin-top:10px;
  text-align:center;
  font-family: Monospace;
}
li{
  font-size: 1.3em;
}
.bold{
  font-weight:bold;
  font-size: 1.4em;
  font-style:normal;
  text-transform:uppercase;
}
#footer-text{
  font-style:italic;
}
<!DOCTYPE html>
<html>
<head>

  <title>Franky</title>
</head>

<body>
  <div id="main">
    
   <div id="banner"> 
    <h1 id="title">Franky the Robot</h1>
    <h2>GOAT Character</h2>
   </div>
    
    <div id="img-div">
      <img id="image" src="https://static.zerochan.net/Franky.full.2514784.jpg">
      <p id="img-caption"> Franky being cool, as usual</p>
    </div>
 
       <div id="tribute-info">
      <p>List of things Franky Enjoys</p>
         <ul>
          <li> <span class="bold">Cola</span> - Possibly his favorite of all </li>
           <li> <span class="bold">Robots</span> It's because he is one! </li>
          <li> <span class="bold">Possibly Robin</span> Really.. who doesn't? </li>    
         <ul>
         <p id="footer-text"> If you actually want to know about Franky you should most definitely visit <a  href="https://onepiece.fandom.com/wiki/Franky" id= "tribute-link" target="_blank" > <span class="bold">click here</span></a>
    </div>
      
 </div>
    </div>
         
</body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>

responsive css html
2 Answers

Remove the height: 430px; from the #img-div.
If you limit the container height it won't allow the content to use bigger space. With overflow: hidden you can hide those content parts which can't fit into the container.
If you don't want higher picture than 430px, than set the height: 430px; instead of height: auto; (or height: 100%; if your container will remain like now). In that case whatever it happens it will 430px height your picture. however, this might be bad if it's ultrawide.
Technically always the container says how big is space that the inner content can maximum occupy.

*{
margin: 0px;
padding: 0px;
}
#banner{
  border: 1px solid red;
  background-color:yellow;
  height: 90px;
  width: 100%;
}
h1, h2{
  text-align:center;
  font-family: Arial;
  margin-top: 10px;
  color: red;
  
}
#image{
  max-width: 100%; 
  display:block; 
  max-height: 100%;
  margin: 0 auto;
}

.img-container {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

#img-div {
  width: 100%;
  padding-top: 20px;
  border: 2px solid green;
  background-color: #e8dd5f;
}
#img-caption{
  margin-top: 5px;
  font-family: Arial;
  font-weight: bold;
  text-align:center;
}
#tribute-info{
  padding-top: 10px;
  background-color: #ede7a6;
}
#tribute-info p{
  display:block;
  font-size: 30px;
  text-align:center;
}
ul{
  
  list-style-type:none;
  margin-top:10px;
  text-align:center;
  font-family: Monospace;
}
li{
  font-size: 1.3em;
}
.bold{
  font-weight:bold;
  font-size: 1.4em;
  font-style:normal;
  text-transform:uppercase;
}
#footer-text{
  font-style:italic;
}
<!DOCTYPE html>
<html>
<head>

  <title>Franky</title>
</head>

<body>
  <div id="main">
    
   <div id="banner"> 
    <h1 id="title">Franky the Robot</h1>
    <h2>GOAT Character</h2>
   </div>
    
    <div id="img-div">
      <div class="img-container">
        <img id="image" src="https://static.zerochan.net/Franky.full.2514784.jpg">
      </div>
      <p id="img-caption"> Franky being cool, as usual</p>
    </div>
 
       <div id="tribute-info">
      <p>List of things Franky Enjoys</p>
         <ul>
          <li> <span class="bold">Cola</span> - Possibly his favorite of all </li>
           <li> <span class="bold">Robots</span> It's because he is one! </li>
          <li> <span class="bold">Possibly Robin</span> Really.. who doesn't? </li>    
         <ul>
         <p id="footer-text"> If you actually want to know about Franky you should most definitely visit <a  href="https://onepiece.fandom.com/wiki/Franky" id= "tribute-link" target="_blank" > <span class="bold">click here</span></a>
    </div>
      
 </div>
    </div>
         
</body>
</html>

user_9251000

You've set the image width and height to 400px respectively. The parent div has the correct values for responsive designs.

#image{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
}

However, if you really want to make your page responsive I suggest learning media queries and possibly bootstrap.

Hope this helps.

user_128519010
Related