harry_ord Posted November 16, 2016 Share Posted November 16, 2016 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=1I 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 More sharing options...
Ingolme Posted November 16, 2016 Share Posted November 16, 2016 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 More sharing options...
harry_ord Posted November 17, 2016 Author Share Posted November 17, 2016 I leave it like that and now it's working. Thanks. @media screen and (width: 1024px) and (height: 600px) { .video { top: 100%; } } @media screen and (width: 1024px) and (height: 768px) { .video { top: 80%; } } Link to comment Share on other sites More sharing options...
harry_ord Posted November 17, 2016 Author Share Posted November 17, 2016 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 More sharing options...
Ingolme Posted November 17, 2016 Share Posted November 17, 2016 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 More sharing options...
harry_ord Posted November 18, 2016 Author Share Posted November 18, 2016 I'm aiming to address all the different devices screens that appear here, that's why i'm using all these specific queries:http://quirktools.com/screenfly/#u=http%3A//feriapixel.cl/cleanway/&w=1920&h=1080&a=4&s=1What can i do? :c Link to comment Share on other sites More sharing options...
Ingolme Posted November 18, 2016 Share Posted November 18, 2016 You have to make your design flexible. Allow it to adapt to all screen sizes, using media queries only for points at which things need to be rearranged. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now