I'm using media queries to make a mobile version of a website for a client. When i resize the browser the media queries do not take effect, however they do take effect when the site is viewed on each device - i'm just curious as to why the media queries don't take effect when i resize the browser window itself i.e. Firefox.
Any input is much appreciated.
Code i'm using:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 720px) {
#container {
width: 100% !important;
}
}
If you are using attribute: max-device-width or min-device-width, it will work only on devices with that width and will ignore the manual browser resizing.
You should change the attribute to: max-width / min-width.
#media screen and (min-width: 1024px){
/* some CSS here */
}
Check here:
In CSS media the difference between width and device-width can be a bit
muddled, so lets expound on that a bit. device-width refers to the
width of the device itself, in other words, the screen resolution of
the device.
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
change your code to -
#media only screen
and (min-width : 320px)
and (max-width : 720px) {
#container {
width: 100% !important;
}
}
alternately you can keep your previous code and check the responsive nature of your website in local computer by Mozilla Responsive Design View feature - shortcut 'Control+Shift+M'
Related
I have a confusion.
I have seen in many sites that using max-device-width is deprecated and I need to use max-width instead. So I need to hind a banner when in landscape mode and here is how I did it:
/*landscape*/
#media screen
and (max-width: 1024px) and (orientation:landscape)
{
.hide-row-on-landscape {
display:none !important;
}
}
On dev tool in chrome it works like a charm but when I tests it in real iphone I can not see it working.
So I decided to use the following:
/*landscape*/
#media screen
and (max-width: 1024px) and (orientation:landscape),
(max-device-width: 1024px) and (orientation:landscape)
{
.hide-row-on-landscape {
display:none !important;
}
}
and it worked.
Now I am confused
if max-device-width is deprecated and shouldnot be used why max-width does not work in this scenario?
Also what is the best solution for what i am trying to do?
**Update
I know there are a lot of answers supporting max-width without device but non of them explain why max-width does not support orientation. So none of them not answers my scenario: I need to use (orientation:landscape) and it seems that when it comes to this property max-width does not handle that
Hi You can simply use only this one:
#media only screen and (max-width : 1280px) {
}
it will work on all devices mobile + tabs + browsers(old, new).
why you need this (orientation:landscape)?
ISSUE SUMMARY:
Hi,
I just purchased Jomsocial + Template Socialize. I use RSForm for my landing page.
I have an image on left and the form on the right side on desktop view.
When I reduce browser to simulate Responsive view, the text come under image but has a width of 50%. This is the width necessary for destopview.
So I add some lines in /templates/socialize/css/template.css
#media (max-width: 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
BUT it doesn't work. width stay 50% instead of 100%. I tried with Chrome & Firefox.
Please see screenshot for better understanding.
Someone has an idea how to fix that?
Try this
#media only screen and (max-width : 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
I think the underlying issue is using max-device-width vs plain old max-width. Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed. */
}
I'm trying to create a responsive design using Twitter bootstrap. Everything is going well but I cannot figure out how to set a minimum width for desktop users.
When a user is on a desktop I don't want them to be able to shrink the browser to the point where they see responsive features meant for the phone (e.g. the navbar mobile button). I would rather just have a horizontal scroll bar when the browser gets too small. How can I get this functionality without affecting the mobile layout?
You can address this with a media-query. The only problem is that you have to set a fixed width for this, min-width doesn't seem to work in this case (tested in Firefox and Chrome). If this is fine for you, you can try the following example:
// Should be something > 1024
#media only screen and (min-device-width: 1300px) {
body {
width: 1300px;
}
}
To replicate the way that logicvault.com have their site working you would need to change the Bootstrap CSS so that you only have one media query which kicks in at 480px.
Here's the media query they have set:
#media only screen and (max-width: 480px){
// styles here
}
I was able to achieve this functionality by using Frederic's advice:
// Should be something > 1024
#media only screen and (min-device-width: 1024px) {
body {
min-width: 1025px;
}
}
However, I also needed to adjust the bootstrap responsive files so the styles were only applied to touch devices. I ended up including Modernizr on my page and looking for the touch class.
E.g. change:
#media (min-width: 768px) and (max-width: 979px) {
// Styles are here
}
to:
#media (device-min-width: 768px) and (device-max-width: 979px) {
.touch {
// Styles go here
}
I'm trying to create a responsive website. I want to reduce the height of hgroup tags if my iPad is in landscape mode, but it ignores my media query. If it's in portrait mode it doesn't ignore my media query anymore.
This is what I've written:
#media only screen and (min-device-width: 2048px) and (orientation:landscape) {
hgroup {
height:200px;
}
}
When I'm testing my website at responsivepx.com and resize the browser to 2048px, hgroup assumes the 200px height. iPad doesn´t.
I have already searched for a solution and tried a few but none worked for me. For example:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
}
I found out my Droid has a max width of 800 pixels, which I think some lower-resolution computers are smaller than, but I want my Droid to display the mobile CSS, so I am not sure max device width is the best solution. So does anybody know how I'd design my CSS link tags so that the mobile CSS is used only by smartphones while the desktop CSS is used only by desktop computers (including the kind with a width under 800px)?
Responsive Web Design, using media-queries
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
I tried the solutions above, but they didn't work for iPad in landscape mode. The iPad Landscape is 1024 px.
So my solution was:
#media only screen and (min-width: 1025px) {
.myClass {
/*...your desktop-only style...*/
}
}
#media (pointer: fine) {
body {
background-color: red;
}
}
The gap between mobile and desktop devices is getting closer and closer -consider, for example, tablets or the recently new hybrid devices.
As Aaron points, you might want to define different rules based on device screen (min-width or max-width). Eg:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
A different criteria you might want to use is targeting devices based on the their screen capabilities:
Touchscreen media-queries