I've been trying to understand how to override bootstrap media queries for a little while now and I still do not understand how to disable certain media queries (do I have to manually override every element?).
My media queries are as follow:
/* anything > ipad */
#media only screen and (min-width: 972px) {
.container {
width: 960px;
}
}
/* iPhone portrait */
#media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
}
/* iPad portrait */
#media only screen and (max-device-width: 640px) and (orientation: portrait) {
}
I want my site to have a 960px container on iPad + Desktop, and to load a full screen image on anything less than an iPhone. If the tablet or device is say a max width of 700px, they will get a 960px wide site with a horizontal scroll bar. I'm unsure how to this with bootstrap 3, I'm not using it with LESS.
Related
There are some styles that I wish to apply to smartphone, both in portrait and in landscape orientation.
Is there a good media query that targets both scenarios? Actually I have to repeat the css with two media queries:
.selector {
// smartphone portrait
#media (min-width: 320px}) and (max-width: 512px}) {
// stuff
}
// smartphone landscape
#media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
// same stuff
}
}
I believe if you create a media query with the min-width being the portrait phone screen width and the max-width being the landscape phone screen width it should cover it all regardless of orientation.
I have made a simple website which is responsive (more or less). I have used media query #media only screen and (max-width: 699.99px). Now I know that this will activate the css inside it when resolution is less than 699.99px. So it is fine with computer but it doesn't work in mobiles and I know why. But I don't really understand how to solve this. I want this query to work on computer screen (resizing) as well as mobile devices and tablets.
You can use em or rem instead of px. This makes the styling depend on how much content fits on the screen assuming that you also use em/rem to set the sizes of your elements.
could be an issue with difference between real screen width and actual size
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
or you can use media-device-width
#media only screen and (max-device-width: 700px) {
/* Style goes here */
}
but I suggest you to start with mobile-first approach that will definitely solve the issue. basically first you do css for mobile and then you override css for desktop with media queries like
#media only screen and (min-width: 700px){
/* Style goes here */
}
btw does your device support 699.99px? try using 700 instead
First of all if you want make your website responsive it's better to use responsive framework like Bootstrap or foundation.
but if you prefer to do it without framework. try this
you can make 4 media query steps
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 544px and up)
#media (min-width: 544px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
and extra guide
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I hope this can help
I want to set different media queries for 1024px width screens depending on whether it's a laptop screen or iPad screen.
For example if someone view my site in laptop(width : 1024px) they should see an image and if they view it from iPad(width : 1024px ) the image should be hidden(display:none).
You probably mean iPad Pro whose width is 1024px.
You can detect whether the device is an iPad or a laptop using media queries by checking for the device height: iPad Pro height is 1366px which, I think, is higher than the height of any laptop, so the CSS would look like this:
#media screen and (min-width: 1024px) and (min-height: 1320px) {
/* iPad Pro */
}
#media screen and (min-width: 1024px) and (max-height: 1310px) {
/* Laptop */
}
If the width of the screens are the same size, CSS can't distinguish them from each other I guess.
You can use JavaScript. The platform property, from the navigator object, returns a string with the platform the browser is used on. (i.e. MacIntel, Win32) (Usage: platform.navigator)
For disabling and enabling stylesheet this might work for you: http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/
for ipad specific media queries use below code,
if u want to hide img in ipad at 1024px width i.e. landscape mode u can use class "hide-me-landscape"
if u want to hide img in ipad with landscape and portrait mode use class "hide-me"
if u want to hide img in portrait mode use class "hide-me-portrait"
see below code for ex
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me{
display: none;
}
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-portrait{
display: none;
}
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-landscape{
display: none;
}
}
you can learn more about it here
you can also use modernizr to detect whether user is using touch screen device or not and apply your css accordingly
hope it helps :)
I have the following css:
/* iPhone 4 Landscape */
#media only screen
and (max-device-width: 480px)
and (min-device-width: 320px)
and (orientation: landscape) {
.dropdown-menu{
height: 210px;
}
}
/* iPhone 4 Portrait */
#media only screen
and (max-device-width: 480px)
and (min-device-width: 320px)
and (orientation: portrait) {
.dropdown-menu{
height: 370px;
}
}
/* iPhone 5 Landscape */
#media only screen
and (max-device-width: 568px)
and (min-device-width: 320px)
and (orientation: landscape) {
.dropdown-menu{
height: 210px;
}
}
My problem is that the iPhone 5 condition seems to be taking affect on iPhone 4. I know it's effectively doing the same thing (setting the height to 210px) but is there are reason for this? I'm testing it in chrome's phone emulator.
It seems like it's only seeing the one condition of min-device-width being 320px and using that query as opposed to using all of the conditions together.
Thats because the iphone 4 screen will fullfill both media queries (resolution is lower than max iphone 5 media query) and the iphone 5 is the last one. Being the last one it overrides the iphone 4 media query.
When I look on my iPad on landscape view, the CSS Media query max-width: 992px is not working and the responsive layout is still visible (but on desktop it breaks at 992px). Any help is appreciated.
<meta name="viewport" content="width=device-width" />
My CSS media queries:
.responsive_button{display:none;}
#media only screen and (max-width: 992px) {
.responsive_button{display:block;}
}
#media only screen and (max-width: 768px) {}
#media only screen and (max-width: 480px) {}
#media only screen and (max-width: 320px) {}
iPad resolution is:
768px by 1024px (Portrait)
1024px by 768px (Landscape)
If you want to target ipad's different orientation use the below media queries mind that the orientation is specified as well.
iPad in Portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad in Landscape:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
An iPad's resolution is 768px by 1024px, this means in landscape mode, it is 1024px wide. The media query will not be active as 992px fits onto the 1024px wide screen.
As a general rule, iPads in landscape mode should just be treat as desktop screens.