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

It would be better to use a width for the screen, because height will always be different because of the floating!

 

/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

// YOUR CSS HERE
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

// YOUR CSS HERE
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

// YOUR CSS HERE
}

/* Additional large screens 1280+ */
@media only screen and (min-width: 1280px) {

// YOUR CSS HERE
}

It would be better to use a width for the screen, because height will always be different because of the floating!

 

/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

// YOUR CSS HERE
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

// YOUR CSS HERE
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

// YOUR CSS HERE
}

/* Additional large screens 1280+ */
@media only screen and (min-width: 1280px) {

// YOUR CSS HERE
}

 

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?