Columns don't act responsive even though #media is set? [duplicate] - html

Question

This question already has answers here:
Why media queries has less priority than no media queries css
(2 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 2 years ago.
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äß § 5 TMG</h2>
<p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max Muster<br><br>Kontakt:<br>Telefon: [phone]<br>Fax: [phone]<br>E-Mail: max#muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gemäß
§27a Umsatzsteuergesetz: Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbehörde:<br>Musteraufsicht Musterstadt</p>
</div>
<div class="column right">
<h2>Haftungsausschluss:</h2>
<p>Zweck einverstanden.</p>
</div>
</div>

Answer 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äß § 5 TMG</h2>
<p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max
Muster<br><br>Kontakt:<br>Telefon: [phone]<br>Fax: [phone]<br>E-Mail:
max#muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gemäß §27a
Umsatzsteuergesetz:
Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbehö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äß § 5 TMG</h2>
<p>Max Muster<br>Musterweg<br>12345 Musterstadt<br><br>Vertreten durch:<br>Max
Muster<br><br>Kontakt:<br>Telefon: [phone]<br>Fax: [phone]<br>E-Mail:
max#muster.de<br><br>Umsatzsteuer-ID:<br>Umsatzsteuer-Identifikationsnummer gemäß §27a
Umsatzsteuergesetz:
Musterustid.<br><br>Wirtschafts-ID:<br>Musterwirtschaftsid<br><br>Aufsichtsbehörde:<br>Musteraufsicht
Musterstadt</p>
</div>
<div class="column right">
<h2>Haftungsausschluss:</h2>
<p>Zweck einverstanden.</p>
</div>
</div>

Answer 2

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.