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; }
}
Related
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;
}
}
I want a div to have a width of 120px on 1200px screen (10%) and when resizing the window to 1920px, the width will linearly increase to a width of 375px (around 20%). How can I achieve this without using JS?
I tried using the calc function but I can't think of the right formula to satisfy both.
I don't want to use Media Queries if possible, but if all else fails, what is the cleanest way to do it in Media Queries?
you can archive using #media-query
for example:
#media screen and (min-width: 1920px)
{
div{
width:375px;
}
}
this is how media query works
if you are looking for calc function try something like this , here 25em corresponds to 400px
{
min-width: 50%;
width: calc((25em - 100%) * 1000);
max-width: 100%;
/* Change 25em to your breakpoint. */
}
You could write it something like this:
div {
height: 200px;
width: 120px;
background-color: tomato;
}
#media (min-width: 1200px) {
div {
width: 120px;
}
}
#media (min-width: 1920px) {
div {
width: 375px;
}
}
This is just using a couple of media queries and a default width which is also necessary. I'm not sure why you wouldn't want to use media queries, they're supported in all current browser (and most old browsers too).
Following your comment, you could try doing something with Viewport units (Viewport width in this snippet). Here's an updated example without media queries:
div {
height: 200px;
width: 10vw;
min-width: 120px;
max-width: 375px;
background-color: tomato;
}
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>
How would I produce the following...
I'd like my div to have a width of 400px. However, if less than 400px are available then I'd like it to have a width of 50%. Is this possible using just CSS? I've tried setting min-width and width but it seems to always go with whichever is larger.
Sounds like you want media queries:
#media screen and (min-width: 400px) {
div { width: 400px; }
}
#media screen and (max-width: 399px) {
div { width: 50%; }
}
why not use
width:auto;
height: auto;
in your css??
If your for the resolution you can use Media queries
#media screen and (max-width: 400px) {
//put css on body that you want to apply
body{
width:auto;
}
//put css on div that you want to apply
.div{
width:auto;
}
}
it means smaller than 400px will have this css or adjust to what it contains.