I have a web app and I want for mobile only to remove the scroll bar from body element.
i have tried with
#media only screen and (max-width: 500px) {
body {
overflow-y: hidden;
}
}
but nothing happend, the css property is not applied;
How can I set the scroll hidden only on mobile?
Guess you will need to add more details because it's working as expected (resize your browser to see it or check this jsfiddle):
body {
height: 2000px;
}
#media only screen and (max-width: 500px) {
body {
background-color: red;
overflow-y: hidden;
}
}
Related
I am trying to fix my mobile nav bar so it will be fixed and background will show all the time, (it's currently taking styling from the main nav for desktop which is transparent)
#media (max-width: 600px) {#navbar {position:fixed; background-color: #383736;}
This code is currently not working, can anyone help please?
Thanks
You are missing the property :
top: 0;
In your css
A html element with id navbar doesn´t exist in your code
#media (max-width: 600px) {
.main-header__inner {
position:fixed;
background-color: #383736;
}
}
Solved on the page you linked with:
#media (max-width: 600px) {
header{
position: fixed;
z-index: 2;
width: 100%;
}
}
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; }
}
When in responsive website the sidebar moves to the footer of the page but the background-color won't fix the size of it, as the print screen.
http://i61.tinypic.com/v8hhkj.gif
What could I do here?
The website: http://bloganacastro.com
You have set width: 100% for the sidebar for proper display in responsive..
#media (max-width: 768px) {
.sidebar.col-md-4 {
width: 100%;
}
}
You have set width: 30% for the sidebar, which makes the background to shrink.
Let the browser calculate the width.
#media (max-width: 768px) {
.sidebar.col-md-4 {
width: auto;
}
}
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>
I have this CSS:
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
This hides the page when it gets to 500px (just to test it), works fine in my browsers on windows PC, when I try on my MacBook Pro in Safari it doesn't seem to detect it, how can I get this to work properly? I cant find much on it on google
I tested it and it's working fine on Safari(Mac) as well.
div{
background: #ddd;
width: 300px;
height: 300px;
}
#media only screen and (max-height: 500px) {
div{
display: none;
}
}
Here's the screenshot. Though there's a bug with Safari(iPad/iPhone). You might love to read this.
That works in safari, I just tested it to make sure.
The only thing that is missing in your question is the position of that query in regards to the properties/class you would like to change.
In other words, place it at the end and it will work.
Example:
This tells the browser to hide the body when the browser height is smaller than 500px:
body {
display: block;
}
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
If you had it the other way around the last body definition would make the media query useless.
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
body {
display: block;
}