Varying blockdisplay widths under different screen widths

Mobile
1

I have an issue when varying the footer width (as block display) for different screen displays.

To put it simply:

  • for the 601-900px screen width range I want 70%/30% split
  • for the 901px+ screen width range I want 80%/20% split
    (even when I change these % to make it more obvious - no change occurs)

Help?

In the CSS I have:

@media (min-width: 601px) and (max-width: 900px) {
.blockdisplay {
    display: block;
}
.footer-lhs {
    background-color: black;
    height: 100%;
    width: 70%;
    float: left;
    color: #B3B3B3;
}
.footer-socialmedia {
    background-color: #FFE380;
    height: 100%;
    width: 30%;
    float: right;
    text-align: center;
    vertical-align: middle;
}
}

@media (min-width: 901px) {
.blockdisplay {
    display: block;
}
.footer-lhs {
    background-color: black;
    height: 100%;
    width: 80%;
    float: left;
    color: #B3B3B3;
}
.footer-socialmedia {
    background-color: #FFE380;
    height: 100%;
    width: 20%;
    float: right;
    text-align: center;
    vertical-align: middle;
}
}
2

Hi, apm.

It would be helpful if you posted a link to a test site with your code, OR
Attach the code for a “working page” (starts with DOCTYPE, ends with </html>, contains full head, CSS, and body HTML) so we can see the problem exactly as you see it.

As it is, we cannot tell how the CSS and HTML are structured.

If you have not done so already, please read our posting guidelines
Forum Posting Basics

The formatting of code can be retained by putting three backticks on a line by themselves before the block of code, and gain three more backticks on a line by themselves after the block of code. Like this:

```
Your code goes here
```

You can also highlight the code and click the symbol in the compose menu bar </> and it will do the same thing for you.

The CSS that you have presented invites a rather long monologue about writing HTML and CSS in general and more about coding for mobile devices. If would rather see the bigger picture before getting prematurely wound up.

Thank you

EDIT: OK, I had some spare time. This is what your media queries suggest to me that you are trying to achieve. I took the code that does not change at different widths out of the media queries. The desktop first approach.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/varying-blockdisplay-widths-under-different-screen-widths/213852
apm
Jan 30,2016 10:00 PM
-->
    <style type="text/css">

.blockdisplay {
    display: block;
}
.footer-lhs {
    background-color: black;
    width: 80%;
    height: 100%;
    height:300px;
    float: left;
    color: #B3B3B3;
}
.footer-socialmedia {
    background-color: #FFE380;
    width: 20%;
    height: 100%;
    height:300px;
    float: right;
    text-align: center;
    vertical-align: middle;
}

@media screen and (max-width: 900px) {
    .footer-lhs {
        width: 70%;
    }
    .footer-socialmedia {
        width: 30%;
    }
}
    </style>
</head>
<body>

<div class="blockdisplay">
    <div class="footer-lhs"></div>
    <div class="footer-socialmedia"></div>
</div>

</body>
</html>

If you will copy this code into a file and open it in your browser and drag the width of the browser from wider than 900px to narrower than 900px, you will see the widths of the “columns” change. NOTE: height:100% does nothing in your code; therefore, I have replaced height:100% with height:300px for demo purposes only. height:100% requires a little more CSS that you have not included.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.