CODEWITHSUNDEEP
cssmedia-queries
user1004108
user1004108

Reputation: 23

Media-query width not being followed

I currently have a footer with 3 sections layed out as follows:

.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }

I want them to change layout at 768px and 480px. At 768px, I have the following (to stack the first on top, with the #2 & 3 splitting the space underneath it):

.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }

At 480px (to have all 3 stack and take up the width) I have:

.foot2, .foot3 { width: 98%; float: none; }

My problem is that at 480px and under, the widths are not being followed and are still staying at 48%. If I use 'inspect' in Chrome, I can see that the 'float: none;' is being followed, but not the width from the media-query.

Does anyone have any idea why it would choose to recognize the float declaration but not the width: 98%?

Thanks!

Upvotes: 2

Views: 341

Answers (1)

Beau Smith
Beau Smith

Reputation: 34367

I attempted to reproduce the issue you are having but was unable to do so.

I believe that my test code below works as you desire. How is your code different from the below html/css?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .foot1 { background: tan }
    .foot2 { background: green }
    .foot3 { background: blue }
    .foot1, .foot2, .foot3 { width: 33%; float: left; }
    .foot2 { margin: 0 0.5%; }
    @media screen and (max-width: 768px) {
      .foot1 { width: 98%; float: none; margin: 0 1%; }
      .foot2, .foot3 { width: 48%; margin: 0 1%; }
    }
    @media screen and (max-width: 400px) {
      .foot2, .foot3 { width: 98%; float: none; }
    }
  </style>
</head>
<body>
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div>
</body>
</html>

Upvotes: 1

Related Questions