html - Messing with responsive web design, can't seem to make it work -
what's happening text being changed, nothing else. can't seem manipulate divs when screen size changes. , i've set relevant meta tag. syntax correct on actual file on desktop (as in, there <style></style> tags on web page (i'm doing on 1 page can reference things more easily. i'll move them .css files later). i'm trying show have before go diving code. also, it's not there, relevant stuff. if more needed, let me know, 1 thing isn't working (and should tell i've messed up) background-image isn't being added when page re-sized.
<meta name="viewport" content="width=device-width, initial-scale=1"> @media screen , (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; }
css it's interpreted top bottom. you've got 2 body rules on css in same media declaration last 1 overwrite properties declared on first one. that's why don't see background image.
i recommend declare rules in hierarchical order avoid kind of troubles.
Comments
Post a Comment