Yash Jain Yash Jain - 3 months ago 6
CSS Question

formatting for "phone" not working

I am currently developing my first chrome extension that uses html/css/javascript. I have a problem, and so far none of the questions in stackoverflow seem to answer my problem.

I have a layout that looks like a phone, just like an IPhone. Basically, my button inside the

homepage-bottom
ID
div
is not working properly. I want the
homepage-bottom-inside
ID
div
(it's color is black) round.

It currently looks like this.

Please explain my error, and fix the code.



#homepage-bottom-content {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 15px;
height: 50px;
padding-top: 10px;
width: 50px;
background-color: black;
border-radius: 100px;
}
#homepage-bottom-content-inside {
height: 25px;
width: 25px;
background-color: black;
border: #E6E6E6 2px solid;
border-radius: 7.5px;
margin-right: auto;
margin-left: auto;
}

<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>





EXTRA

This is how the overall "phone" looks.



#homepage {
margin: auto;
height: 620px;
width: 330px;
background-color: lightblue;
border-radius: 40px;
border: black 7px solid;
}
#homepage-content {
margin: auto;
height: 470px;
cursor: cell;
width: 270px;
background-color: white;
border-radius: 7.5px;
border: 3px black solid;
}
#homepage-bottom-content {
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 15px;
height: 50px;
padding-top: 10px;
width: 50px;
background-color: black;
border-radius: 100px;
}
#homepage-bottom-content-inside {
height: 25px;
width: 25px;
background-color: black;
border: #E6E6E6 2px solid;
border-radius: 7.5px;
margin-right: auto;
margin-left: auto;
}

<div id="homepage">
<div id="homepage-top">
<div id="homepage-top-content">
<div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
<div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
</div>
</div>
<div id="homepage-content">
</div>
<div id="homepage-bottom">
<div id="homepage-bottom-content">
<div id="homepage-bottom-content-inside"></div>
</div>
</div>
</div>




Answer

The padding-top is part of total height, so height:40px + padding-top:10px does it for homepage-bottom-content.

Be aware that the border thickness is also part of the total height.

#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 40px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}
<div id="homepage-bottom">
  <div id="homepage-bottom-content">
    <div id="homepage-bottom-content-inside"></div>
  </div>
</div>

Extra

Your phone fixed:

#homepage {
  margin: auto;
  height: 620px;
  width: 330px;
  background-color: lightblue;
  border-radius: 40px;
  border: black 7px solid;
}
#homepage-content {
  margin: auto;
  height: 470px;
  cursor: cell;
  width: 270px;
  background-color: white;
  border-radius: 7.5px;
  border: 3px black solid;
}
#homepage-bottom-content {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  height: 40px;
  padding-top: 10px;
  width: 50px;
  background-color: black;
  border-radius: 100px;
}
#homepage-bottom-content-inside {
  height: 25px;
  width: 25px;
  background-color: black;
  border: #E6E6E6 2px solid;
  border-radius: 7.5px;
  margin-right: auto;
  margin-left: auto;
}
<div id="homepage">
  <div id="homepage-top">
    <div id="homepage-top-content">
      <div style="background-color: black; height: 15px; width: 15px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border-radius: 100px;"></div>
      <div style="background-color: black; height: 10px; width: 50px; margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 15px; border-radius: 20px;"></div>
    </div>
  </div>
  <div id="homepage-content">
  </div>
  <div id="homepage-bottom">
    <div id="homepage-bottom-content">
      <div id="homepage-bottom-content-inside"></div>
    </div>
  </div>
</div>