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) {
}
Related
I'm using the below media queries for website. As and when the window is expanded and contracted, it works fine. But for mobile phone, although on chrome dev tool's cell phone simulator, the layout looks perfect. But this same media queries breaks on my actual mobile phone(despite having the same design/layout for both mobile and web). How can I make two different media queries?
#media only screen and (min-width: 10px) and (max-width: 319px) {
}
#media only screen and (min-width: 320px) {
}
#media screen and (min-width: 481px) {
}
#media screen and (min-width: 641px) {
}
#media screen and (min-width: 768px) {
}
#media screen and (min-width: 961px) {
}
edit: iphone 6.
The reason I have so many break pints is because I'm using background image. When window size is made small, the image(with no background repeat) shows blank space at the bottom. To counter that problem, had to go with many breakpoints.
Use max-width instead of min-width. Because i think all your media query represent when the screen resolution bigger than 320 678 etc and due to that only desktop query execute.
Bootstrap has an amazing responsive layout system, however, sometimes its sizing with retina screens isn't quite 'right'.
For example, my retina iPad has a huge screen size but the actual display isn't the same. On the iPad I'd like to hide the left navigation component and use the expand button in the header control to show/hide, however, my iPad retina hits the large screen size and therefore is not hidden.
I've got my left nav using the bootstrap 3 classes: nav-left nav-collapse and I realize I can adjust the min/mid/max sizes but i dont think thats the right approach. What am I missing?
Style your page using #media queries.
Just like this:
#media for retina
#media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
.nav-left {
/* STYLE HERE YOUR MIN/MAX SIZE */
}
.nav-collapse {
/* STYLE HERE YOUR MIN/MAX SIZE */
}
}
#media for iPad Landscape and Portrait
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* STYLES GO HERE */
}
Source of #media for iPad/iPhone #media queries
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'
I am having trouble with: http://brybell.me/vipeepz/skeleton/
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
#logo {
margin-top:400px;
position:relative;
}
}
That is the media query code within the layout.css file of the skeleton boilerplate/ framework.
It does not seem to be picking up the media query, I have tried many things and it doesn't seem to be working.
There are two logos now, because I was doing some testing, but I really am just trying to do something simple similar to instagram's website. simple phone image with screenshot and then a logo and block of text beneath.
I would appreciate any and all help. Thank you very much. I have been frustrated with this because I had the site how I wanted it on desktop, but can't get things to reposition to where I want them to be.
Your inline style declaration is overwriting the media query in this case since inline styles have higher specificity. Try moving your inline styles into an external stylesheet and your media query for #logo should be picked up.
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
}