Ok so I cant see whats up with this, I have two divs
html
<div id="desktop-content">
desktop
</div>
<div id="mobile-content">
mobile
</div>
One should print mobile if on mobile screen and hide the desktop and the other show on desktop but hide on mobile.
Here is my queries
#media screen and (min-width: 0px) and (max-width: 200px) {
#mobile-content { display: block; } /* show it on small screens */
}
#media screen and (min-width: 201px) and (max-width: 1024px) {
#mobile-content { display: none; } /* hide it elsewhere */
}
#media screen and (min-width: 0px) and (max-width: 200px) {
#desktop-content { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 201px) and (max-width: 1024px) {
#desktop-content { display: block; } /* show it elsewhere */
}
seems simple enough, except desktop is printing when mobile should, and on desktop its all printing.
Im new to media queries, If someone could point out the error of my ways i would appreciate it.
Alright, say by default you want the mobile to show. Causes you to get the following:
#mobile-content {
display: block;
}
#desktop-content {
display: none;
}
#media screen and (min-width: 768px) {
#mobile-content {
display: none;
}
#desktop-content {
display: block;
}
}
This should cause the mobile content to be default visible and the desktop content to be default on invisible. When a screen has 768px or more, it will switch and will hide the mobile content and show the desktop content. Hope this helps!
First done use same css multiple time
Change your code like this
#media screen and (min-width: 0px) and (max-width: 768px) {
#mobile-content { display: block; } /* show it on small screens */
#desktop-content { display: none; } /* hide it on small screens */
}
#media screen and (min-width: 789px) and (max-width: 1024px) {
#mobile-content { display: none; } /* hide it elsewhere */
#desktop-content { display: block; } /* show it elsewhere */
}
we consider mobile and tablet screen starts from 768px
Here is the working example https://jsfiddle.net/3r1qe2Lc/3/
check resizing the fiddle
Was simple mistake I was viewing on a widescreen monitor outside the parameters of the css. simple fix.
#media screen and (min-width: 0px) and (max-width: 600px) {
#mobile-content { display: block; } /* show it on small screens */
}
#media screen and (min-width: 601px) {
#mobile-content { display: none; } /* hide it elsewhere */
}
#media screen and (min-width: 0px) and (max-width: 600px) {
#desktop-content { display: none; } /* hide iton small screens */
}
#media screen and (min-width: 601px) {
#desktop-content { display: block; } /* show it elsewhere */
}
Related
I have got a Bootstrap carousel with 3 images (480x320px). Width of carousel itself set to 480px. How to scale carousel when you resize browser size?
.carousel{
width: 480px;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
Thanks!
You need to make the width of your .carousel class as 100%..
You need to make the below change to your CSS,
.carousel{
width: 100%;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
However if you want keep them at 480x320px initially and want to handle them while the browser is getting resized, then you will need to go for media queries.
/* For devices which are smaller than 960 pixels */
#media only screen and (max-width: 959px) {
//Write your CSS here.
}
/* For Tablets */
#media only screen and (min-width: 768px) and (max-width: 959px) {
//Write your CSS here.
}
/* For all mobiles */
#media only screen and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Landscape Size to Tablet Portrait */
#media only screen and (min-width: 480px) and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
//Write your CSS here.
}
Hope this helps!
It's possible that a simple width:100%; on the css, and apply img-responsive to it may fix it.
Let me know!
Currently I manage the CSS code differently based on screen size using and it works fine:
#media only screen and (max-width: 40em) {
my code
}
Now, what I'm trying to achieve is to have a piece of html code placed differently based on the screen resolution.
For instance my div id="news_box" would be placed in my header wrapper on desktop. Whereas on mobile phones, div id="news_box" would be placed in the footer wrapper.
How could I achieve that?
Many thanks,
As far as I know, there is no way to manipulate the DOM using CSS in that way, but you could use a JavaScript hack:
window.addEventListener('load', function(){
var width = this.innerWidth;
if(width < 400) {
document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
}
});
Or maybe assign a class to it and have the element appear in both the header and footer (although, you would want to change the ID):
#footer-id .news_box {
display: none;
}
#header-id .news_box {
display: block;
}
#media only screen and (max-width: 40em) {
#footer-id .news_box {
display: block;
}
#header-id .news_box {
display: none;
}
}
With this you go through the diffrent resolutions. You have to change the values for your "news_box" for every different one.
e.g. For desktops you have a float:left box which will be not present in the css part for your mobiles.
example:
/* Tablets */
#media only screen and (min-width: 760px) {
#news_box { max-width: 760px }
…
}
/* midle screens */
#media only screen and (min-width: 980px) {
#news_box { max-width: 980px; float:left; margin: 0 auto; }
}
/* big screens */
#media only screen and (min-width: 1280px) {
#news_box { max-width: 1280px; float:left; margin: 0 auto; }
…
}
Ive been trying to make a change of my category images depending on screen size. But right now only the first screen width size are being used. It seems as though the other ones are being overridden by the first row of code (max-width: 769px). (on this site: http://origami.directory/)
What can I do so it changes 3 times as it should do?
.category-list-item {
float: left;
padding: 1em;
}
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
};
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
};
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
};
If someone could help me fix this I would be super grateful!
/ Martin
Remove the extra semi-colon ; from the end of your queries.
Your queries should be like this:
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
}
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
}
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
}
Your queries are conflicting with each other making the second query obsolete. Specify a range for each like this:
#media (max-width: 480px) {
.category-list-item{width: 33.33%;}
}
#media (min-width: 481px) and (max-width: 768px) {
.category-list-item { width: 25%; }
}
#media (min-width: 769px) {
.category-list-item { width: 20%; }
}
I'm not very sure with the min-width:769px part so just let me know what exactly are you trying to do and I'll fix that accordingly. The above is just to show you how queries work basically.
I want to edit the margin-top of a text in the mobile device. I have come this far but I know there is something crazy in the code:
.Foljoss {
padding-left: 18px;
background: #fff;
}
#media screen and
(max-width: 768px; margin-top:17px)
It is the last part in which I dont get it. How can I adjust the top margin for the <div class="Foljoss"> on the mobile version? Notice that the #media screen-part is not correct.
You need to wrap the css inside a selector inside the media query.
#media screen and (max-width: 768px) {
.Foljoss {
margin-top: 17px;
}
}
body {
background-color: lightgreen;
}
.show-on-mobile {
display: none;
}
#media screen and (max-width: 568px) {
.show-on-mobile {
display: block;
}
.hide-on-mobile {
display: none;
}
body {
background-color: lightblue;
}
}
<div class="show-on-mobile">Only visible when width is <= 568px</div>
<div class="hide-on-mobile">Disappears when screen width > 568px</div>
/* 767 is max for mobile */
#media screen and (max-width: 767px) {
.Foljoss {
margin-top: 17px;
}
}
I am using media queries as below
#media (min-width:100px) and (max-width:639px)
{
}
#media (min-width:640px) and (max-width:960px)
{
.box {background-color:red;}
}
#media (width:768px)
{
.box {background-color:green; }
}
#media (min-width:961px)
{
}
I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in #media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 #media (min-width:768px)
At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.
How can i target certain element using media queries for specific devices
example :http://jsfiddle.net/X43Et/
Update:
I am not sure what exactly was wrong with it put i copy pasted #media (width:768px) { part from fiddle & it works in my actual page.
May be some invisible typo mistake..
This is just an example of media queries You would want to have your normal css before the media queries
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
And when you're using media queries, you want to specify that you want the screen size so you use screen after #media. I hope this is what you were looking for and will help you!
Here is a small example script I made
<style>
#box {
width: 500px;
height: 200px;
background: yellow;
border: 1px solid #000;
}
#media screen and (max-width:1000px) {
#box { background: red; }
}
#media screen and (min-width:1000px) and (max-width:1200px) {
#box { background: green; }
}
#media screen and (min-width:1200px) and (max-width:1400px) {
#box { background: blue; }
}
</style>
<div id="box">
</div>
On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.