I have some list items set to min-height: 12em - for desktop
When sizing down for tablet / mobile screens I want to reset this to: min-height: auto
However iPad / iPhone is ignoring this and maintains the 12em
I've also set height: auto
Use the following code:
/* Desktop */
.listings.default li {
min-height: 12em;
}
/* Between Desktop and Tablet */
#media only screen and (max-width: 1200px) and (min-width: 768px) {
.listings.default li {
display: list-item;
min-height: inherit;
}
}
So use inherit instead of auto
I tested this on my iPhone but with another media query..
Check this post to see some of the media queries for standard devices..
Related
I am using media queries to address mobile screens.
Issue i am facing is with text on the header with Portrait vs Landscape.
The landscape "top" property takes over the portrait one.
Meaning; to position the landscape text properly, on the portrait it gets positioned too high!
Any idea what's the solution to this? How to get portrait and landscape to respect each-other properties and not overtake each-other?
Or how would you approach it?
/* Mobile Portrait */
#Media only screen and (max-width: 480px) {
#one{
position: relative;
top: 310px;
}
}
/* Mobile Landscape */
#Media only screen and (max-width: 734px) {
#one{
position: relative;
top: 230px;
}
}
I think you need to reverse the order since <480 is also <784 it is following the rule that is last in the order.
Try using this, I usually put the media queries in order of largest to smallest.
/* Mobile Landscape */
#Media only screen and (max-width: 734px) {
#one{
position: relative;
top: 230px;
}
}
/* Mobile Portrait */
#Media only screen and (max-width: 480px) {
#one{
position: relative;
top: 310px;
}
}
I am trying to get my slider on my website to adjust to a different height in a mobile screen but didn't get it to work properly.
The website that i am trying to work on is www.msstoreway.com. After having added the css-code below, i could get the desktop/laptop screen to adjust but on a mobile screen the slider height wont change at all. Can you please advise what i am doing wrong and how to get the height to increase in a mobile screen only.Thanks. See my CSS-Codes that i have added.
regards
Mark
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
#slider .rslides, #slider .rslides li { height: 250px; max-height:
250px; }
#slider .rslides img { height: 100%; max-height: 250px; }
}
The plugin you are using for the slider is scaling the height/width as inline styles which is overriding your css styles.
You are able to add the !important tag which will then override the inline styles, but do note you will lose the aspect ratio scaling that the js plugin is implementing.
#media only screen and (max-width : 500px) {
.rslides { height: 250px !important; }
.rslides img { height: 250px !important; }
}
I am testing my code on different browsers. I see that Safari (version 9 on Mac) absolutely ignoring media query on orientation portrait.
This is a code:
#media print and (orientation:landscape) and (-webkit-min-device-pixel-ratio:0){
// Hide the default headers and footers that the browser adds
.no-print-portrait {
display: block;
}
.portrait-notification {
display:none;
}
}
// If the orientation is in portrait it hides all html and displays a notification to the user to switch to landscape
#media print and (orientation:portrait) and (-webkit-min-device-pixel-ratio:0){
// Hide the default headers and footers that the browser adds
#page {
margin: 0;
}
.no-print-portrait {
display: none;
}
.portrait-notification {
display: block !important;
font-size: 24px;
padding-left: 8px;
padding-top: 20px;
text-align: center;
}
}
Does somebody has idea why?
Many thanks!
Safari doesn't support that due to the documentation
http://caniuse.com/#search=print
and/or
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
I am working for a hybrid application, and found that "Google Pixel C" device, the UI shown in portrait mode is same as landscape mode though a CSS selector is used for the change.
I am using cordova framework for the development. When the device is in landscape mode I am applying landscape class to the body tag and removing the class, when the device is in portrait mode.
The media query used to show the landscape mode is as shown below:
#media screen and (min-width:480px) {
body.landscape #Login #Logo {
float: left;
width: 45%;
margin: 4% auto;
}
body:not(.landscape) #Login #Logo {
width: 100%;
margin: 4% auto;
}
}
I also tried using the media query:
#media screen and (min-width:480px) and (orientation : portrait) {
#Login #Logo {
width: 100%;
margin: 4% auto;
}
}
#media screen and (min-width:480px) and (orientation : landscape) {
#Login #Logo {
float: left;
width: 45%;
margin: 4% auto;
}
}
but found that when keyboard is up, the media query of landscape gets applied even though device is in portrait mode.
Is anyone else facing the same problem?? Any suggestion would help.
Found solution to the problem. When there is an orientation change, have started applying landscape class to the body tag and written media queries accordingly
I'm currently playing with bootstraps v2.3.2. media querys (I'm not using bootstraps grid, just those 4 media queries) to test them on mobile and tablet devices, and I notice that I keep getting a horizontal scrollbar and I don't understand why?
Basically I have one div and this CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin:0;
/* height: 3000px; */ /* forced vertical scrollbar */
height: 300px;
}
div{
padding: 0 10px;
margin: 0 auto;
background: aqua;
width: 980px;
border: 1px solid black;
height: 100%;
}
/* Large desktop */
#media (min-width: 1200px) {
div{
background: red;
width: 1200px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
div{
background: yellow;
width: 768px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
div{
background: blue;
width: 100%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
div{
background: green;
}
}
Situation when I force vertical scrollbar: JSBin
But when I don't force vertical scrollbar, I get the wanted result: JSBin
So it's obviously due the vertical scrollbar. I found this article about scrollbar issue in Responsive Web Design, but I get the same result in both Chrome and FF.
Update: as looking the source of bootstrap v3.3.2 I've noticed that they have new media queries, however, they don't use the minimal possible width for the .container. This are their media queries:
#media (min-width: 768px) {
.container {
width: 750px; /* 18px difference */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 22px difference */
}
}
#media (min-width: 1200px) {
.container {
width: 1170px; /* 30px difference */
}
}
And here's the JSBin. Even when I forced the vertical scrollbar to appear, this won't trigger the horizontal scrollbar.
But if I want to use the minimal possible width for the media queries, like:
#media (min-width: 768px) {
.container {
width: 768px;
}
}
#media (min-width: 992px) {
.container {
width: 992px;
}
}
#media (min-width: 1200px) {
.container {
width: 1200px;
}
}
This will trigger the horizontal scrollbar - JSBin
Did the guys from bootstrap did that on purpose, because of the possibly that there can be the presence of vertical scrollbar?
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
I know that this may be a novice question, but I would appreciate if someone clarify this for me.
Bootstrap Media Querys
Setting media query
Bootstrap supports four media sizes:
Phones < 768px (8 inch)
Tablets ≥ 768px
Desktops ≥ 992px (10.33 inch)
Desktops ≥ 1200px (12.5 inch)
These are not fixed sizes!
If you have a screen that has a min-width of 768px the media query should trigger.
However setting a container to 768px will almost allways make that screen overflow
First of all the body element of all modern browser does have a margin to it.
example: Webkit browsers: body {margin: 8px;} so if your element of 768px and a margin-top of 8 and margin-bottom of 8 you get: 784px
so your screen is 768px (or less) and your content is 784px this will make it overflow (as it should). That said bootstrap sets: body {margin:0;}
An other example would be border. Border adds size to your element unless box-sizing isn't default. While outline sets the border inside your element.
Did the guys from bootstrap did that on purpose, because of the possibily that there can be the presence of vertical scrollbar ?
There is a possibility of that but i would think they set it because there is a bunch of css property's that affect size, so they gave a margin of error so to speak to avoid strange behavior like a horizontal scroll bar popping up.
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
You can use it: Fiddle!
Just Remember that some browsers will render it with a certain width.
Checkout the fiddle
https://jsfiddle.net/YameenYasin/as4Lmgas/1/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
div {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background: blue;
height:auto;
min-height:300px; // For testing purpose only
}
#media (min-width: 768px) {
div {
width: 750px;
background: silver;
}
}
#media (min-width: 992px) {
div {
width: 970px;
background: yellow;
}
}
#media (min-width: 1200px) {
div {
width: 1170px;
background: red;
}
}
<div></div>