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;
}
}
Related
I have a clickable icon image in the header of my web page; I want to hide the icon image when the page is pulled up on a desktop, laptop, and/or any larger screens. However, I want the icon to show when the page is pulled up on a mobile device/ phones and hand-held tablets.
This is what I tried:
#media screen and (min-width: 0px) and (max-width: 700px) {
.ghost {
margin-left: 500px;
/*show the icon on smaller screen*/
}
}
#media screen and (min-width: 701px) and (max-width: 1024px) {
.ghost {
margin-left: 500px;
display: none;
/*hide the icon on larger screens*/
visibility: hidden;
}
}
/* Adding this so the demo is visible even though the image link is broken. --editor */
.ghost img { border: 1px solid blue; }
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
...could I get some help with this please? ...thanks
Hi
If you want to display icon JUST on <= 700px devices your code should look like this below. Setting min-width: 0px in first #media and max-width: 1024px in second is unnecessary.
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
}
}
#media screen and (min-width: 701px) {
.ghost {
margin-left: 500px;
display: none; /* Acts like this item isn't there at all */
visibility: hidden; /* Doesn't show the item, but saves space for it */
}
}
I don't know your full issue, but if you want to act like it isn't there on large screens this CSS below will be better ;)
.ghost {
display: none;
}
#media screen and (max-width: 700px) {
.ghost {
margin-left: 500px;
display: initial;
}
}
More info about media queries you can find e.g. on this W3Schools site.
Cheers
Try this
You have to write only one media query. Like this
#media only screen and (min-width: 767px) {}. It for mobile devices.
.ghost {
display: block; /* default it will show in mobile devices. */
}
#media only screen and (min-width: 767px) {
.ghost {
display: none; /* it will hide larger than 765px eg: laptop and desktop */
}
}
<div style="cursor:pointer;" onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
The standard resolution for desktops is 1024px.
For tablets, it is 768px and for mobile it is 320px;
So to hide the image for desktops and above, you could do the following:
.ghost {
cursor: pointer;
}
#media (min-width: 1024px) {
.ghost {
display: none;
}
}
<div onclick="openNav()" class="ghost"><img src="img/ic_ghost.svg" alt="ghost" /></div>
I wanted to make responsive website, and I used media query.
One thing I don't understand is, iPhone 6 and LG G5 has different image size. What I figured out is many android device's image size is same.
Is this about IOS and Android problem? or my codding is wrong?
#media only screen and (max-width: 1920px) {
.btn{
width:70px;
height: auto;
}
}
#media only screen and (max-width: 764px) {
.btn{
width:50px;
height: auto;
}
}
#media only screen and (max-width: 364px) {
.btn{
width:40px;
height: auto;
}
}
Thanks for helping :)
Try with
I phone 6 media Query
#media (max-width:667px){ /* do something here */ } /*landscape view*/
#media (max-width:375px){ /* do something here */ } /*portrait view*/
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 am using a bootstrap 3, have an div element with class outer and want to apply different css on mobile and computer.
For example, this is my css codes:
/* for computer */
div.outer {
height: calc(100vh - 80px);
padding: 0;
margin: 0;
min-height: 500px
}
/* for mobile */
div.outer {
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
}
How do I implement it? Thanks for any suggestions.
Use media query for mobile devices. below is template, dont forgot to add mobile meta tag.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 570px)
and (-webkit-min-device-pixel-ratio: 2) {
//your css for mobile is here
}
I would recommend using media queries for this one.
To change the div.outer class when in mobile use the code below.
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
div.outer {
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 0;
}
}
More media queries here
For mobile you have tp define width of the device in '#media' queries.
767px is a standard width of screen for mobile and tablets. So you can use like this
#media all and (max-width:768px){
// your css for mobile
}
This css will apply only when you device width will be 768px or less
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>