Jump to content

Question about screen resolutions and media queries


harry_ord

Recommended Posts

I'm using the following online tool to test my website responsiveness:

http://quirktools.com/screenfly/#u=http%3A//feriapixel.cl/cleanway/&w=1920&h=1080&a=4&s=1

I need to put the video in different positions according to the screen resolution.

If the screen resolution is 1024 x 768, i need the video with a top position of 100%.

 

If the screen resolution is 1024 x 600, i need the video with a top position of 80%.

 

The problem is i can't do both things at the same time with media queries.

I do this:

@media screen and (width: 1024px) , screen and (height: 600px) {
  .video {
    top: 100%;

  }
}

@media screen and (width: 1024px) , screen and (height: 768px) {
  .video {
    top: 80%;
  }
}

Both of this rules work individually, but if i try to combine them like in the example above, only the one that is in the bottom is applied. What can i do?

Link to comment
Share on other sites

You're applying both rules to any screen that's 1024 pixels wide.

 

The comma indicates that either of the selectors will be applied.

 

Use the "and" operator instead of a comma.

Link to comment
Share on other sites

Now i'm trying to do this, but it won't allow me, the element with class .video doesn't move:

@media screen and (width: 900px) and (height: 600px) {
  .video {
    top: 200%;
  }
}

This is my whole media queries section:

@media screen and (max-width: 960px) {
 .contacto {
    top: 20%;
 }

}



@media screen and (min-width: 1024px) {
  .lafrase {
    background-size: cover; 
    }

}

@media screen and (max-width: 700px) {
  .contacto {
    top: 0%;
  }
}

@media screen and (width: 900px) and (height: 600px) {
  .video {
    top: 200%;
  }
}

@media screen and (width: 1024px) and (height: 600px) {
  .video {
    top: 100%;

  }
}

@media screen and (width: 1024px) and (height: 768px) {
  .video {
    top: 80%;
  }
}



@media screen and (min-width: 1400px) {
  .video {
    top: 70%;
  }

  .lafrase {
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Link to comment
Share on other sites

You seem to be targeting very specific screen sizes. If a screen is 601 pixels tall or 899 pixels wide your CSS rules will be ignored.

 

That's just the first thing I noticed. Be sure that your vertical percentage values are contained within an element with a specified height.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...