0

I've created these to text boxes and want to add responsiveness to them, however, adding the @media doesn't work for some reason. I want the the right box move under the left box when the screen size is under x pixels. 

/* CSS Document */

* {
  box-sizing: border-box;
}

#fullbodybg {
  margin-top: 20%;
}


/* Create two unequal columns that floats next to each other */

.column {
  float: left;
  padding: 10px;
  height: auto;
  /* Should be removed. Only for demonstration */
}

@media screen and (max-width: 1000px) {
  .column {
    width: 100%;
  }
}

.left {
  margin-left: 10%;
  width: 25%;
}

.right {
  margin-right: 10%;
  width: 55%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  font-family: lato;
  font-style: normal;
  font-weight: 100;
  font-size: 15px;
  text-align: left;
}
<div class="row">
  <div class="column left">
    <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>
    <p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max Muster<br><br>Kontakt:<br>Telefon: 01234-789456<br>Fax: 1234-56789<br>E-Mail: max@muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gem&auml;&szlig;
      &sect;27a Umsatzsteuergesetz: Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbeh&ouml;rde:<br>Musteraufsicht Musterstadt</p>
  </div>
  <div class="column right">
    <h2>Haftungsausschluss:</h2>
    <p>Zweck einverstanden.</p>
  </div>
</div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
awesome_o
  • 41
  • 4

2 Answers2

1

It is about how css prioritizes, you can google and read it. there are some rules.

In your case, you can either put the @media query below your left and right CSS (media at the bottom is best). Or add important to the CSS in the media query (which not a good practice but will do the job).

Solution 1. 

* {
            box-sizing: border-box;
        }

        #fullbodybg {
            margin-top: 20%;
        }

        /* Create two unequal columns that floats next to each other */
        .left {
            margin-left: 10%;
            width: 25%;
        }

        .right {
            margin-right: 10%;
            width: 55%;
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        .row {
            font-family: lato;
            font-style: normal;
            font-weight: 100;
            font-size: 15px;
            text-align: left;
        }
        .column {
            float: left;
            padding: 10px;
            height: auto;
            /* Should be removed. Only for demonstration */
        }

        @media screen and (max-width: 1000px) {
            .column {
                width: 100%;
            }
        }
<div class="row">
        <div class="column left">
            <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>
            <p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max
                Muster<br><br>Kontakt:<br>Telefon: 01234-789456<br>Fax: 1234-56789<br>E-Mail:
                max@muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gem&auml;&szlig; &sect;27a
                Umsatzsteuergesetz:
                Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbeh&ouml;rde:<br>Musteraufsicht
                Musterstadt</p>
        </div>
        <div class="column right">
            <h2>Haftungsausschluss:</h2>
            <p>Zweck einverstanden.</p>
        </div>
    </div>

Solution 2.

/* CSS Document */

* {
  box-sizing: border-box;
}
#fullbodybg {
 margin-top: 20%;
}

/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  height: auto; /* Should be removed. Only for demonstration */
}
@media screen and (max-width: 1000px) {
  .column {
    width: 100% !important;
  }
}

.left {
margin-left: 10%;
  width: 25%;
}

.right {
 margin-right: 10%;
  width: 55%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
    font-family: lato;
    font-style: normal;
    font-weight: 100;
    font-size: 15px;
    text-align: left;
}
<div class="row">
        <div class="column left">
            <h2>Angaben gem&auml;&szlig; &sect; 5 TMG</h2>
            <p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max
                Muster<br><br>Kontakt:<br>Telefon: 01234-789456<br>Fax: 1234-56789<br>E-Mail:
                max@muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gem&auml;&szlig; &sect;27a
                Umsatzsteuergesetz:
                Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbeh&ouml;rde:<br>Musteraufsicht
                Musterstadt</p>
        </div>
        <div class="column right">
            <h2>Haftungsausschluss:</h2>
            <p>Zweck einverstanden.</p>
        </div>
    </div>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Amit Pandey
  • 274
  • 4
  • 16
0

Your main issue is actually the order of your styles. What happens is that your style in .left and .right overrides your @media style. This should be a quick fix:

/* CSS Document */

* {
    box-sizing: border-box;
}
#fullbodybg {
    margin-top: 20%;
}

/* Create two unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    height: auto; /* Should be removed. Only for demonstration */
}

.left {
    margin-left: 10%;
    width: 25%;
}

.right {
    margin-right: 10%;
    width: 55%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.row {
    font-family: lato;
    font-style: normal;
    font-weight: 100;
    font-size: 15px;
    text-align: left;
}

@media screen and (max-width: 1000px) {
    .column {
        width: 100%;
    }
}

I simply moved @media at the end to make sure it overrides all other styles when it meets the requirements you've set.

Algef Almocera
  • 759
  • 1
  • 6
  • 9