Is there a way using css3 media queries in which you can change design in landscape and portrait.
So I want to check that effect. But how I can use in desktop. Is there any tool where I can use this effect like in jsfiddle?
Media queries respond to the size of the screen/viewport. Just resize your browser window.
Hi this is an example of css media queries, just resize the page
JSFIDDLE or this one
#media (max-width: 400px) {
.responsive-test {
width: 1px;
}
}
Here is a Codepen! Try resizing your browser width to less than 600px
Try this Chrome extension: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
I use it and it's very good.
Related
Whenever I press ctrl+shift+m to enter responsive design mode in Firefox, it shows the screen dimensions in the upper left, but if I see 992px as the width here and then create this media query:
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
, the stuff that is supposed to happen at 992px actually happens at 1082px, according to Firefox. Why is this? Is there a way to get Firefox's measurements to match exactly with the results that media queries produce?
Additionally, stuff that is supposed to happen at 768px according to the media query appears to be happening at 838px.
The answer was that the amount of zoom in Firefox messes with the responsive design mode measurements. Apparently, the dimensions shown in responsive design mode aren't the virtual dimensions of the website but are instead the screen dimensions, so they don't change when Firefox is zoomed in or out.
Try this code:
#media (max-width: 992px) {
/*stuff to happen at 992px*/
body{
background: #000;
}
}
Instead of
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
In Firefox, Make Sure while testing for website responsiveness , the browser zoom setting to be 100% only. It effects the screen width shown to you in RDM (Responsive Design Mode).
I am not sure about others but i got same issue earlier.
I am using media queries in order to achieve responsive design. But I have found out that each browser behaves differently with it for example.
At resolution 480x856 chrome uses rules from #media screen and (max-width: 480px) but Firefox uses rules from #media screen and (max-width: 680px) is there a way to achieve same result in all browsers?
I find this post, maybe can help you.
"...It’s actually not a CSS or CSS interpretation problem at all–it’s the way Firefox does (or doesn’t) resize the viewport. Unlike Google Chrome, and most other browsers, Firefox allows it’s toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them. You’ll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect."
https://css-tricks.com/forums/topic/firefox-ignoring-max-width320px-media-query/
We are looking for a way to create a div class to only appear on mobile, ie. when the resolution is below 1024x768. We currently use:
hide-below-768
for resolutions above 768.
Would anyone be able to advise on setting for below?
Thanks in advance.
You're looking for media queries
#media screen and (max-width: 768px){
/* add css here */
}
This allows you to apply different class behaviours, wrapping and sizing rules depending on the browser view port size.
But this won't be just for mobiles. It's also works when reducing the width of the browser window on desktop browser.
It's part of a technique called responsive design.
http://www.w3schools.com/css/css_rwd_intro.asp
I designed a responsive website but now the client wants me to lock the width of the site until new changes are implemented.
When I lock the width of the container the media queries are still responding to the size of the browser screen and not the container size.
Is there a way to lock the browser viewport for desktop so that it only recognized the smaller size and uses those media queries?
My site is responsive but I want it locked to 1024px. When I do that but view it on a larger screen width it doesn't pick up the 1024px media query styles...
Well the obvious solution would be to comment out the other media queries, remembering to also comment out the media query declaration for the 1024px view. For example:
/*
...
#media ... {
...
}
#media screen and (max-width: 1024px) {
*/
elem {
...
}
/*
}
*/
$('body').css('width','1024px'); with jquery
I'm not fully sure how this should work on desktops, but I'm pretty sure that when you resize the browser, the orientation should change (provided the height was bigger than the width and after resizing it's the other way round).
So that said, I have no idea why the following code only comes in effect on pageload.
#media all and (orientation: portrait) {
.slider-slide {
background-size: auto 100% !important;
}
}
#media all and (orientation: landscape) {
.slider-slide {
background-size: 100% auto !important;
}
}
Basically what I want this code to do is to resize a background image based on the orientation. If I have the page resized properly on pageload, both work, but when I resize the window on the fly, it doesn't work. Any ideas?
Fabrizio Calderan's solution is the best for the given use case, but if you need to detect changing to/from portrait and landscape, the answer to the original question is, yes, this will work.
You can see http://robertnyman.com/css3/media-queries/media-queries.html for a working sample.
The primary difference I see is that Robert used screen instead of all. So:
#media screen and (orientation: portrait) {
...
}
Beyond that there are probably some differences in browsers. Robert's solution worked for me in Chrome and FF. I am not sure about other browsers. (on a side note, there has to be a better caniuse than caniuse.com :) )