I want div1 to appear only when the window width is less than 800px, and I want div2 to appear only when the window width is greater than 800px. My solution is to use the following CSS which works. However, is there a way to do this using only one #media command? It seems clumsy to have to write two conditions, one for a max-width, and one for a min-width.
#media screen and (max-width: 800px) {
#div1 {
display: block;
}
#div2 {
display: none;
}
}
#media screen and (min-width: 800px) {
#div1 {
display: none;
}
#div2 {
display: block;
}
}
<div id="div1">
DIV1
</div>
<div id="div2">
DIV2
</div>
Take one of the set out of media queries.
#div1 {
display: none;
}
#div2 {
display: block;
}
#media screen and (max-width: 800px) {
#div1 {
display: block;
}
#div2 {
display: none;
}
}
<div id="div1">
DIV1
</div>
<div id="div2">
DIV2
</div>
Or
#div1 {
display: block;
}
#div2 {
display: none;
}
#media screen and (min-width: 800px) {
#div1 {
display: none;
}
#div2 {
display: block;
}
}
<div id="div1">
DIV1
</div>
<div id="div2">
DIV2
</div>
There is a way to combine media queries try:
#media only screen and (max-width: 600px) and (min-width: 400px) {
The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
Or if you only want to target screen sizes that are 800px or less use:
#media screen and (max-width: 800px) {
replace #media screen and (max-width: 800px) { #div1 {
display: block;
}
#div2 {
display: none;
} }
with #div1 {
display: block;
}
#div2 {
display: none;
}
Related
<div class="col-md-4 saldos">
<div class="saldo">
<p>Saldo</p>
<h1>R$ 713,00</h1>
</div>
</div>
#media (max-width: 800px) {
.saldo {
width: 150px;
}
}
I defined 800px, but it just works on 530px. Does anyone know why this happens?
TRY:
#media only screen and (max-width: 800px) {
.saldo {
width: 150px;
}
.saldo h1 {
font-size: 25px;
}
}
I need to make number of columns set according to width of screen not to chose if there is a 3, 4, 5 or 6
this is your solution, you need the media query's for CSS
https://jsfiddle.net/Alan_van_Buuren/4w9wy73y/
.column {
width: 50px;
font-size: 20px;
float: left;
}
#media screen and (min-width: 480px) {
.column {
width: 100px;
}
}
#media screen and (max-width: 800px) and (min-width: 520px) {
.column {
width: 100px;
background-color: yellow;
}
}
#media screen and (max-width: 519px) and (min-width: 100px) {
.column {
width: 150px;
background-color: red;
}
}
<div class="column">One</div>
<div class="column">Two</div>
<div class="column">Three</div>
<div class="column">Four</div>
<div class="column">Five</div>
<div class="column">Six</div>
<div class="column">Seven</div>
<div class="column">Eight</div>
<div class="column">Nine</div>
<div class="column">Ten</div>
<div class="column">Eleven</div>
<div class="column">Tweelve</div>
I came with a design feature I want to add to my website. I have a container that hold informations about user.The container holds dynamically created divs,this means that in every user account the number of divs changes. My main goal is to add responsive style so my container hold exactly the same number of divs in every device width, positioned in the center.
Problem
The problem is in the horizontal align of the divs. Look in the next images:
If we have a width of 768px then the interface looks as expected
If we resize the window to eg. 850px width then the results are the following:
You see that the divs aren't positioined in the center of the screen so that a blank space is created. Moreover it should appear one more div as the width of the page expanding if we have the appropriate space to hold one more div in the line. Now think that there could be many rows not just or two. And every column should position the elements in the same place.
I know that my explanation isn't the greatest so if you have any questions please ask.
How can I fix the css rules to cender my divs in the different window widths?
My css file is the following:
/* CONTAINER */
.seas {
margin-right: auto;
margin-left: auto;
}
/* THE INNER BOXES DIVS */
.sea {
min-width: 250px;
min-height: 300px;
display: inline-block;
margin-top: 20px;
margin-right: 10px;
}
#media screen and (max-width: 980px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 800px) {
.sea {
margin-left: 50px;
}
}
#media screen and (max-width: 360px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 320px) {
.sea {
margin-left: 5px;
}
}
The html file
<div class="seas" id="seas">
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div>
Update - (Not) Possible Duplicate -
To answer for the duplicate tag, this question is not duplicate. I understand if you think that it is, cause my question is referring to a more advance web design style than the majority of questions here.I had hard time myself to describe what I wanted. Anyway I found the solution on my own , and thanks to the answer were posted.
So, based on our conversation, I'm adding one fluid design solution, you can look here
http://jsbin.com/rohoqolapa/1/edit?output
All CSS you need is following
/* CONTAINER */
.seas {
margin-right: auto;
margin-left: auto;
}
/* THE INNER BOXES DIVS */
.sea {
min-width: 250px;
min-height: 300px;
display: inline-block;
margin-top: 20px;
margin-right: 10px;
background: red;
box-sizing: border-box;
width: 33.33%;
}
EDIT: - Since changing width is not required and content needs to be center aligned, basically this might be the solution
http://jsbin.com/hapeqerosi/1/edit?output
All you have to do is to change parents css -
.seas {
text-align: center;
}
Your parent div .seas is actually block level element, so you should rather align all it's child centrally.
You should add text-align:center to parent .seas so the inner .sea with display:inline-block; to cover the white space .
.seas {
margin-right: auto;
margin-left: auto;
text-align:center;
}
/* THE INNER BOXES DIVS */
.sea {
min-width: 250px;
min-height: 300px;
display: inline-block;
margin-top: 20px;
margin-right: 10px;
background-color:Red;
vertical-align:top
}
#media screen and (max-width: 980px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 800px) {
.sea {
margin-left: 50px;
}
}
#media screen and (max-width: 360px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 320px) {
.sea {
margin-left: 5px;
}
}
<div class="seas" id="seas">
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div>
Check this JSFiddle
I think it's what you want
HTML:
<div class="box">
<div class="wrapper">
<div>
<img src="http://placehold.it/200x200" />
</div>
<div>
<img src="http://placehold.it/200x200" />
</div>
<div>
<img src="http://placehold.it/200x200" />
</div>
<div>
<img src="http://placehold.it/200x200" />
</div>
</div>
</div>
CSS:
.box {
width: 100%;
}
.wrapper {
display: table;
margin: 0 auto;
}
.wrapper>div {
display: inline-block;
border: none;
}
#media (max-width: 400px) {
.wrapper {
width: 200px;
}
}
#media (min-width: 401px) {
.wrapper {
width: 400px;
}
}
#media (min-width: 601px) {
.wrapper {
width: 600px;
}
}
#media (min-width: 801px) {
.wrapper {
width: 800px;
}
}
The solution is here:
#media only screen and (max-device-width: 980px) {
.seas {
max-width: 90%;
}
.sea {
margin-right: 20px;
}
}
#media only screen and (max-device-width: 970px) {
.seas {
max-width: 100%;
}
.sea {
margin-right: 20px;
}
}
#media only screen and (max-device-width: 800px) {
.seas {
max-width: 80%;
}
.sea {
margin-right: 20px;
}
}
#media only screen and (max-device-width: 770px) {
.seas {
max-width: 80%;
}
}
#media only screen and (max-device-width: 360px) {
.seas {
max-width: 85%;
}
}
#media only screen and (max-device-width: 320px) {
.seas {
max-width: 100%;
}
}
I'm trying to hide the navigation bar and display another thing in it place when the resolution is low and for small screens (mobile)
I did manage to hide the navigation bar but the the other thing won't display.
#media only screen and (max-device-width: 500px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
#media only screen and (max-width: 1279px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
.small-menu {
display: none;
}
.regular-menu {
display: block;
}
Write your css this seqvence
write to your hole page css
write to your css max-width 1279
write to your css max-device-width 500
.small-menu {
display: none;
}
.regular-menu {
display: block;
}
#media only screen and (max-width: 1279px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
#media only screen and (max-device-width: 500px) {
.small-menu {
display: block;
}
.regular-menu {
display: none;
}
}
<div class="samll-menu">This is small menu</div>
<div class="regular-menu">This is regular-menu</div>
I used to work with responsive design. Now I have a feeling, but not sure, that it is possible to manage the position of each div by its id or class. For example:
<div id='first'></div>
<div id='second'></div>
<div id='third'></div>
In CSS you might be able to say:
#media (max-width: 600px) {
// pseudo code
#second: after #third
}
#media (max-width: 300px) {
// pseudo code
#first: after #third
}
Is it possible to manage the element that way without giving the position a value, left or right a value?
You can do this with flexbox using the order property.
FIDDLE (Resize browser window)
.container {
display: flex;
}
.container div {
display: inline-block;
margin: 40px;
width: 100px;
height: 100px;
}
.first {
background: gold;
}
.second {
background: tomato;
}
.third {
background: aqua;
}
#media (max-width: 900px) {
.second {
order: 3;
}
}
#media (max-width: 600px) {
.second {
order: 1;
}
}
.first {
order: 3;
}
}
<div class="container">
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
</div>
Check out this css-tricks article for an overview of flexbox.