CODEWITHSUNDEEP
htmlcssmedia-queriescentering
Athylus
Athylus

Reputation: 191

Centering div with @media

making a website which I want to be scalable for mobile devices. I can't figure out how to make this work, even though I tried a lot of things.

Here is my code:

<div class="vertical-white">


<div class="content-container">

    <div class="horizontal-3">
      <div class="kamer-foto">
        1
      </div>

      <div class="kamer-text">
        <a href="#" class="button-room">Lees meer</a>
      </div>
    </div>

    <div class="horizontal-3">
      <div class="kamer-foto">
        2
      </div>

      <div class="kamer-text">
        <a href="#" class="button-room">Lees meer</a>
      </div>
    </div>

    <div class="horizontal-3">
      <div class="kamer-foto">
        3
      </div>

      <div class="kamer-text">
        <a href="#" class="button-room">Lees meer</a>
      </div>
    </div>

  </div>
</div>

And then here is my CSS:

.vertical-white {
  display: block;
  width: 100%;
  min-height: 400px;
  background-color: white;
}

.content-container {
  overflow: auto;
  width: 66%;
  max-width: 980px;
  min-width: 720px;
  min-height: 400px;
  background-color: rgba(0, 28, 44, 0.5);
  margin: 0 auto;
}

.horizontal-3 {
  display: block;
  float: left;
  width: 28%;
  min-width: 200px;
  margin-top: 5%;
  margin-bottom: 5%;
  height: 400px;
  background-color: rgba(5, 100, 20, 0.3);
  margin-left: 4%;
}

@media screen and (max-width: 720px) {
  .horizontal-3 {
    width: 250px;
    float: none;
    margin-left: 0 auto;
    margin-right: 0 auto;
  }
  .content-container {
    min-width: 300px;
  }
}

The div horizontal-3 is not centering when the screen is smaller than 720px. Float is on none and the margins are set to zero, display is block as well. Why is it not centering?

Upvotes: 2

Views: 48

Answers (2)

Siraj Alam
Siraj Alam

Reputation: 10025

Just make 

.horizontal-3{
    margin: auto;
}

When you write margin-right it just mean you are giving margin from right, which is supposed to be a single value but you gave there two vaues 0 auto. So just give margin: auto and everything will work fine.

Upvotes: 1

Johannes
Johannes

Reputation: 67778

Most important, it's not margin-left: 0 auto and margin-right: 0 auto, but either just margin: 0 auto or margin-left: auto and margin-right: auto, i.e. either ONE value for the single parameters or combined values for the shorthand parameter. (see here: http://codepen.io/anon/pen/qrbNZZ)

Upvotes: 1

Related Questions