I am implementing a HTML application based on responsive design.
I am using "#media only screen" for responsive styling.
I am using the below Css Code for mobile orientation(Landscape/Portrait):
#media only screen and (max-device-width: 465px), screen and (max-width: 465px)
.align {
width: 33.33%;
}
#media only screen and (max-device-width: 736px), screen and (max-width: 736px)
.align {
width: 25%;
}
The first one is for vertical and second one is for landscape styles.
The issue is when I changing the browser orientation form Portrait to landscape, the Portrait style is not removed in css both styles are in enabled state but if I reduce the browser size the vertical style is removed and the landscape style is taking the responsibility.
So How do I remove the unwanted style from my page without changing the browser window size.
You can provide some additional condition with orientation
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
We can also define the css without orientation I think, by defining the media width is enough for styling
#media (max-width: 465px){
//Do your styling here
}
#media (max-width: 1024px){
//Do your styling here
}
This will help u style the css not only for mobile portrait and lanscape but also for device that are in screen size.
Related
I am helping to style an app that is being built in Alpha Anywhere. The goal is to use #media tag to enable different styles to accommodate small phones in portrait orientation, large phones in portrait orientation, phones in landscape orientation, and Tablets.
My thought was to use #media screen and... to define ranges of sizes and have style code within it's brackets that define appropriate container and font sizes to make each format ideal for the device it will be shown on.
Because I'm working in Alpha Anywhere, there is a tab for the CSS. I need to put all the CSS in this one location so I can't ref out to different .css file for each different style. My hope was to bracket the code for one style within one media range and the code for another style within another and so on. Can I have multiple line/regions defined by their #media ranges?
#media screen and (min-width: 150px) and (max-width: 350px) and (orientation: portrait) {
/* Style Code for Small Phone Portrait Orientation Here */
}
#media screen and (min-width: 351px) and (max-width: 560px) and (orientation: portrait) {
/* Style Code for Large Phone Portrait Orientation Here */
}
#media screen and (max-width: 415px) and (orientation:landscape) {
/* Style Code for Phone Landscape Orientation Here */
}
#media screen and (min-width: 561px) {
/* Style Code for Tablet Here */
}
When I organize my style code like this it appears to be heeding only the style from the last of the 4 sets of code(tablet style). Is there a way for me to style these different sizes/orientations on one page?
Start from mobile and write your default styles. Make small changes at the next breakpoint up, keeping it simple and only overriding what is necessary. Media queries for orientation will only complicate things, so use only min-width.
/* Styles for default */
#media screen and (min-width: 480px) {
/* Add styles for next size up */
}
#media screen and (min-width: 720px) {
/* Add styles for next size up */
}
#media screen and (min-width: 960px) {
/* Add styles for next size up */
}
I have media queries written this way :
#media only screen and (max-device-width: 600px) and (orientation: portrait) {
.img-responsive{
height : 200px;
width : 100px;
}
}
#media only screen and (max-device-width: 600px) and (orientation: landscape) {
.img-responsive{
width : 95px;
height : 100px;
}
}
Portrait orientation works fine but for landscape orientation css doesn't seem to apply.
swapping resolution worked for me, though i only tested in chrome
#media all and (max-width: 768px) and (max-height: 1024px) and (orientation:portrait) {}
#media all and (max-width: 1024px) and (max-height: 768px) and (orientation:landscape) {}
There is an issue I've just met with and I think it's the same...
When you are checking your app with inspect mobile simulator there is a zoom option on the top bar. If the zooming value is less than 100%, somewhy CSS doesn't see the orientation as landscape and ignores all the CSS of that #media (I think it's a browser problem). Chrome and Opera have that zoom option and on both browsers, you have the same problem (not on Firefox).
So there are 2 options:
Always check your app on 100% zoom level.
Or if you think that browsers work correctly in this case...
Don't use "orientation" in your media query,
if you are not sure you need it.
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 am using bootstrap to build a client's site and I have come unstuck when trying to target landscape and portrait orientation on mobile in order to add some specific styles for both viewports. How do I target portrait and landscape orientation for mobile styles? I need to add specific styles at 320px breakpoint and certain styles at 480px breakpoint. With my current media queries this is not working Currently in my stylesheet I have the following:
/* portrait phones */
#media only screen and (max-width: 320px) and (orientation:portrait) {
/* Styles */
}
/* landscape phones */
#media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
}
If I put styles in for landscape however I don't think they are being picked up. Every time I make a change and then refresh my Iphone I don't see any difference. Im thinking maybe my media queries are wrong? If there is a better way to target mobile states I would greatly appreciate any help.
Try to use:
#media (orientation: portrait) and (max-width: 400px) {Fooobar}
#media (orientation: landscape) and (max-width: 400px) {foobar}
I managed to resolve this issue in the end by adding a max-width to my 321px media query and was able to target both landscape and portrait mobile orientation. I also found in my header I had: initial-scale=1 which seemed to be causing the problem and after removing it I was able to target the mobile breakpoints I needed.
/*Portrait phones */
#media (max-width:320px){}
/* Landscape phones and down */
#media (min-width: 321px) and (max-width: 480px) {}
I need to set my site on desktop (1024 * 768) and ipad, but I can not separate his Vizualization.
I'm using in Ipad:
# media only screen and (min-device-width: 768px) and (max-device-width : 1010px)
and desktop:
# media (min-width: 1020px)
its Works in Firefox, but not Chrome.
Rather than trying to target specific devices, it's arguably better to set appropriate breakpoints specific to your layout. That is, gradually narrow your browser and observe the points at which this particular design needs to reflow. Then set styles that apply to those points, and let each device receive whatever layout works best within its dimensions.
So, in the head of your page, I recommend you place this:
<meta name="viewport" content="width=device-width">
and then in your style sheet, use something like this (the numbers are arbitrary):
/* default styles, perhaps for basic mobiles and older browsers */
/* end default styles */
#media only screen and (min-width: 1025px) { }
#media only screen and (min-width: 701px) and (max-width: 1024px) { }
#media only screen and (max-width: 700px) { }
#media only screen and (min-width: 320px) and (max-width: 480px) { }
There are so many combinations of this that the above is just a rough example. You don't always need max and/or min. It depends on the layout.
There's also an argument for using ems instead of px, but I won't go there for now. :)
Why not just cascade down?
#media screen and (max-width : 1024px){ /*Styles*/ }
#media screen and (max-device-width : 768px){ /*Styles*/ }
1024x768 is iPad size anyway.