<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;
}
}
Related
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 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;
}
I have a problem with my media queries as it is not overriding each other. The first iteration (max-width: 960px) works fine but the second one (max-width: 380px) does not work and I do not know why. Help is appreciated, thanks.
.fb {
width: 50px;
margin-left: 20px;
margin-right: 20px;
}
#media only screen and (max-width: 960px) {
/* this works */
.fb {
position: relative;
width: 40px!important;
margin-left: 15px!important;
margin-right: 15px!important;
}
}
#media only screen and (max-width: 380px) {
/* this does not work */
.fb {
width: 30px!important;
margin-left: 10px!important;
margin-right: 10px!important;
}
}
<div class="social_container">
<img class="fb" src= "http://placekitten.com/200/300" alt="">
</div>
you are wrongly spelled margin-rigth please change it to margin-right and remove !important
.fb {
width: 50px;
margin-left: 20px;
margin-right: 20px;
}
#media only screen and (max-width: 960px) {
.fb {
position: relative;
width: 40px;
margin-left: 15px;
margin-right: 15px;
}
}
#media only screen and (max-width: 380px) {
.fb {
width: 30px;
margin-left: 10px;
margin-right: 10px;
}
}
<div class="social_container">
<a href="https://www.facebook.com/" target="_blank">
<img class="fb" src="https://i.stack.imgur.com/UzPkq.jpg" alt="">
</a>
</div>
see fiddle
.social_container a {
color: red;
}
#media only screen and (max-width: 960px) {
.social_container a{
color: green;
}
}
#media only screen and (max-width: 380px) {
.social_container a{
color: pink;
}
}
<div class="social_container">
fb
</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 am working on a site and I have two images that need to be inline when device width is more than 425px (min-width: 425px) but for some reason it does not seem to be working how it should be and my css with the #media but it doesn't work for some reason although it is fairly basic
CODE
.info-img {
width: 49.75%;
}
.info-images {
display: inline-block;
text-align: center;
}
#media screen and only (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">
<img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">
</div>
</div>
<style type="text/css">
#import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');
</style>
The problem is because you are giving inline-block to parent instead of img, plus you are writing your media wrongly (its not #media screen and only, but #media only screen and).
Snippet
.info-images {
font-size: 0;
/* fix inline-block gap */
}
.info-img {
width: 50%;
display: inline-block;
vertical-align:top; /* may be necessary */
box-sizing: border-box;
padding: 0 1%
}
#media only screen and (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="//lorempixel.com/1600/900" class="info-img">
<img src="//lorempixel.com/1600/900" class="info-img">
</div>