Ancestral Nyx Ancestral Nyx - 1 month ago 9
HTML Question

Messing with responsive web design, can't seem to make it work

What's happening is only the text is being changed, nothing else. I can't seem to manipulate divs when the screen size changes. And I've already set the relevant meta tag. The syntax is correct on the actual file on my desktop (as in, there are <style></style> tags on the web page (I'm doing everything on one page so I can reference things more easily. I'll move them to .css files later). I'm just trying to show what I have before you go diving into my code. Also, it's not all there, just the relevant stuff. If more than this is needed, do let me know, but one thing that isn't working (and this should tell you where I've messed up) is that the background-image isn't being added when the page is re-sized.

<meta name="viewport" content="width=device-width, initial-scale=1">
@media screen and (max-width: 35em) {
body {
font-size:10px;
background-image: url("http://hdwallpapersx.com/wp-content/uploads/2013/09/Awesome-Background-Hd-Wallpaper.jpg?c09534");
background-color: #000;
color: #F0F;
}
.logo {
position:absolute;
top:0px;
left:0px;
width:100%;
height:50px;
background-color: rgba(0,0,0,.7);
border:none;
border-radius:0px;
padding-top: 15px;
font-size:15pt;
}
.bt {
font-family: Tahoma;
font-size:15pt;
}
nav {
position:absolute;
top: 51px;
width: 100px;
height: 30px;
}
nav ul li {
padding-left: 10px;
float: left;
}
}
html {
width: 100%;
}
body {
width: 99%;
background-color: #000;
background-image: url("");
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
color: #CCC;
}

Answer

CSS it's interpreted from top to bottom. You've got 2 body rules on your css in the same media declaration so the last one will overwrite the properties previously declared on the first one. That's why you don't see the background image.

I recommend you to declare your rules in hierarchical order to avoid this kind of troubles.

Comments