I have a div (circle) and text that I want to show only on desktop.
<div class="circle">Text Here</div>
I can hide the circle fine using this:
#media screen and (min-width: 600px) {
.circle{
//Circle design
}
}
However, the 'Text Here' within the Div still shows.
Anyone know how to hide the text too?
Thanks!
If the browser window is smaller than 600px, show the element with class="circle"
.circle {
display: none;
}
#media screen and (max-width: 600px) {
.circle {
display: block;
}
}
<div class="circle">Text Here</div>
Simply add display:none;in your media query.
#media screen and (max-width: 600px) {
.circle {
display:none;
}
}
Right now it's displayed as a block but now it'll be displayed as none when it hits 600px wide.
To achieve expected result, use below
CSS:
.circle{
display:none;
}
#media screen and (min-width: 600px){
.circle{
display:block;
}
}
Option 2:
CSS
.circle{
visibility:hidden;
}
#media screen and (min-width: 600px){
.circle{
visibility:visible;
}
}
Option3:
#media screen and (max-width: 600px){
.circle{
display:none;
}
}
codepen URL for reference - https://codepen.io/nagasai/pen/JNXypz
Related
I have two divs that are 368px x 228px sitting next to each other but each time I try to apply media queries and run a few tests, it doesn't seem to be working at all. How do I go about resolving this issues.
See my code below:
<style type="text/css">
.block-content-right {
background-color:#e0e620;
flex:1;
}
#media (max-width: 600px) {
.field__item {
width: 100%;
}
}
#media (min-width: 400px) {
.field__item {
width: 100%;
}
}
</style>
<div class="block-content-right">
<p>The people the people the people</p>
</div>
<div class="field__item">
<img src="blah blah.jg";>
</div>
Need some help guys. Thank you.
Your media queries are working, but at least one of them is always going to be active.
Perhaps what you wanted was this:
#media (max-width: 600px) and (min-width: 400px) {
/* This will be active if the screen is between 600px and 400px */
.field__item {
width: 100%;
}
}
Or maybe this:
#media (max-width: 400px) or (min-width: 600px) {
/* This will be active if the screen is NOT between 600px and 400px */
.field__item {
width: 100%;
}
}
Note: For testing purposes, you may want to use a different CSS rule. With the code you are showing, the "width: 100%;" doesn't do anything because divs have 100% width by default. Try using "border:5px solid red;"
Code to stack elements if the page is narrow: (Going into full screen causes the elements to be placed side-by-side)
#media (min-width: 800px) {
.half-width {
display: inline-block;
width: 49%;
}
}
<img class="half-width" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/640px-Zinnia_elegans_with_Bombus_01.JPG" />
<div class="half-width">Here is some text. More and more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text.</div>
Here am using this two media query ,as I read ,First MediaQuery would affect background-color if size of screen size is equal or less then 340px ,where as 2nd MediaQuery would effect if size of screen is less then or equal to 360px...
#media only screen and (max-width: 340px) {
#arf_recaptcha_hruwj8 iframe {
background-color: blue;
}
}
#media only screen and (max-width: 360px) {
#arf_recaptcha_hruwj8 iframe {
background-color: red;
}
}
What i thought is if size is under 340px,1st query would effect and because we are under 340px now. not in 360px.But instead of becoming blue ,it remain red only.
1.Could You please explain me this confusion ?
2.How to write media query so that when its between 341px and 360px It should be red and when <= 340px i have to be blue.
Just swipe your media query and check it will work for sure.
#media only screen and (max-width: 360px) {
iframe {
background-color: red;
}
}
#media only screen and (max-width: 340px) {
iframe {
background-color: blue;
}
}
It's about precedence(CSS Specificity). Last one always applies if you are applying using same selector. As It reads code/file from top to bottom.
#idid{
height: 50px;
width: 50px;
background-color: red;
}
#media only screen and (max-width: 360px) {
#idid {
background-color: black;
}
}
#media only screen and (max-width: 340px) {
#idid {
background-color: blue;
}
}
JSBin link: JSBin LInk
You can also try css specificity here: CSS Specificity checker
#media only screen and (max-width: 360px) and (min-width: 340px)
{
body {
background-color:red ;
}
}
#media only screen and (max-width: 339px) {
body {
background-color: blue;
}
It's about precedence media query. Last one always applies if you are applying using same selector. swipe the code itz works perfectly
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; }
…
}
I am trying to make container fixed size 750px for all sized windows.
Here is HTML:
<div class="container">
<div class="thumbnail" >
..........<br/>
..........
</div>
</div>
and custom CSS:
#media (min-width: 1200px) {
.container {
width: 750px;
}
#media (min-width: 992px) {
.container {
width: 750px;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
But the problem is when I am resizing window from big to small at some point size of thumbnail is getting a little larger and then reverses to its initial size.
Here is a fiddle http://jsfiddle.net/Wy22s/718/ . You can just resize browser window or slide inner window in fiddle itself to left and then to right to reproduce this behavior.
I have tried to add another div with row class. Tried combinations with col-sm, col-md etc, but I can not manage to achieve desired behavior. How can I fix this so the container/thumbnail size stays the same?
you forgot to close the #media brackets.
#media (min-width: 1200px) {
.container {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container {
width: 750px !important;
}
}
#media (min-width: 768px) {
.container {
width: 750px !important;
}
}
.container{ width: 750px !important;}
.thumbnail{ width: 750px !important;}
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.