Why is my div positioning itself weirdly?

Question

On my computer my website is displayed like

On my phone it looks like

How can I make it so on my phone they only go one per row and aren't extremely squished together

#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: left;
  text-align: center;
  width: 30%;
  padding: 10px;
  margin-right: 30px;
  background: #FFF;
  -webkit-box-shadow: 0 1px 5px #ccc;
  -moz-box-shadow: 0 1px 5px #ccc;
  -ms-box-shadow: 0 1px 5px #ccc;
  -o-box-shadow: 0 1px 5px #ccc;
  box-shadow: 0 1px 5px #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.container {
  width: 95%;
  margin: auto;
  overflow: hidden
}

<section id="boxes">
  <div class="container">
    <div class="box">
      <!--<img src="./img/img.png>"-->
      <h3>GROWING COMMUNITY</h3>
      <redline></redline>
      <p>Info about the community</p>
    </div>
    <div class="box">
      <img src="86118e7a6a88f4cfd90d2c95aae8137a.png">
      <h3>CUSTOM SCRIPTS</h3>
      <redline></redline>
      <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
    </div>
    <div class="box">
      <img src="download_1_380x152.jpg">
      <h3>REALISTIC ROLEPLAY</h3>
      <redline></redline>
      <p>Info about the community</p>
    </div>
  </div>
</section>

From my experience HTML would automatically do this for me, am I doing something wrong?

Answer 1

Given the way you have achieved this layout using floats, you can use a media query to make the boxes have a width: 33% at a certain browser viewport width.

For this example, I have chosen 640px as our breakpoint).

If you think about the solution in a mobile-first way, the boxes should display as 100% width blocks by default. Only when the browser detects that the viewport has exceeded a width of 640px, the media query gets applied (and the boxes can float with a width of 33%).

By the way, don't apply any margin or padding to the boxes themselves or else they will take up more than 33% and you won't get a neat 3 column layout. Instead, apply the styles to a child of the box.

.box-inner {
  text-align: center;
  padding: 10px;
  margin: 0 10px 10px;
  background: #FFF;
  box-shadow: 0 1px 5px #ccc;
  border-radius: 3px;
}

@media (min-width: 640px) {
  .box {
    float: left;
    width: 33%;
  }
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <h3>GROWING COMMUNITY</h3>
      <p>Info about the community</p>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <h3>CUSTOM SCRIPTS</h3>
      <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <h3>REALISTIC ROLEPLAY</h3>
      <p>Info about the community</p>
    </div>
  </div>
</div>

Of course there a now more modern approaches to achieve this type of layout in CSS that you may wish to explore.

CSS flexbox

@media (min-width: 640px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .box {
    flex: 1 1 33%;
  }
}

<div class="container">
  <div class="box">
    <h3>GROWING COMMUNITY</h3>
    <p>Info about the community</p>
  </div>
  <div class="box">
    <h3>CUSTOM SCRIPTS</h3>
    <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
  </div>
  <div class="box">
    <h3>REALISTIC ROLEPLAY</h3>
    <p>Info about the community</p>
  </div>
</div>

CSS grid

@media (min-width: 640px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="container">
  <div class="box">
    <h3>GROWING COMMUNITY</h3>
    <p>Info about the community</p>
  </div>
  <div class="box">
    <h3>CUSTOM SCRIPTS</h3>
    <p>Our developers, Sam Behner and Robert Weber are working to get custom scripts that no other community has into the server!</p>
  </div>
  <div class="box">
    <h3>REALISTIC ROLEPLAY</h3>
    <p>Info about the community</p>
  </div>
</div>

However each approach follows the same strategy. Start with boxes that are 100% width blocks. And then at a certain breakpoint, apply a media query to allow the boxes to fill the space in container in a more appropriate manner.

Answer 2

If I follow your logic I would change the width of the box to:

width: calc(100%/3 - 50px);

However a solution using media-queries would be more elegant.

Answer 3

You can use flexbox. Using the order and flex-flow properties, we can achieve that too. Just adjust the CSS as per your need.

@media screen and (max-width: 560px) {
    .container { display: flex; flex-flow: column;
   }

}