tcmspark

Not quite sure I understand why the height will always be different? I got it working fine for the height: @media screen and (max-height: 500px) and (min-height: 490px) { p{ color: red; } body{ background-color: blue; } } @media screen and (max-height : 300px) and (min-height: 290px) { p{ color: yellow; } body{ background-color: green; } } I'm just trying to work out how can I can make the colour ONLY change when the height AND width are at a certain size. Surely there is a way of combining the two queries?

Hey guys, I know that you can use media queries to adjust the content on a website depending on the width of the website - useful to go from laptop to tablet to phone etc. What I'm trying to do is make my browser display different content when the size of the browser hits a certain size (size meaning width AND height) eg. when my browser is 200 width AND 200 height - the text is red when my browser is 200 width BUT 300 height - the text is blue When my browser is 400 width and 20 height - the text is green @media screen and (height : 500px) { p{ color: red; } } This makes the text red when the height is 500px, but say I only want the text to go red when the box is 500 height AND 200 width. How could I do this? Making the text change at specific values is stage one. Ideally I'd like to give the user a bit of leeway so for eg. Make text red when the browser is between 200-210 height AND between 450-460 width. if this is possible then this would be amazing!! Sorry if this post comes across a bit patronising, I'm just trying to make it as clear as possible. It's for a uni project where I'm trying to get different 'chapters' of a story to display depending on the size at which the viewer drags their browser. Any help you guys can offer would be greatly appreciated, many thanks! Tom

We're not quite there unfortunately! This image might help you guys get a picture of what I'm trying to achieve. https://dl.dropbox.c...38/website1.JPG Edit: Ryan solved it, what a star! I may well be posting again soon with more problems though

Hi guys, first post but not the last I'm sure... I'm designing a small site for practice and am having real trouble with some positioning... files: https://dl.dropbox.com/u/28823038/VYKA.rar The page is exactly how I want it (for now) except the logo, nav and social icons should be overlaid on top of the image. Instead they've created their own area on top of the image. I've tried every combination of positioning I can think of but no luck. I came really close and got the image flush to the top and the logo and nav on top, but then couldn't get the social icons to float right. I'm really stuck so any help you can offer would be GREATLY appreciated. Many thanks, Tom