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>
Related
HTML
<div class="container">
<div class="photos" id="box">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
</div>
CSS
.container {
max-width: 1280px;
margin: 0 auto;
}
.photos {
display: flex;
background-color: #000;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
padding: 0;
max-width: 1280px;
}
.photos img {
display: block;
float: left;
flex: 0 0 auto;
background-color: #fff;
width: calc(25%-120px);
/*
box-sizing: border-box;
border-right: 40px solid #FFFFFF;
*/
}
#media screen and (min-width: 1024px) {
.photos img {
width: calc(100%/4);
height: calc(100%/4);
}
}
#media screen and (min-width: 769px) and (max-width: 1024px) {
.photos img {
width: calc(100%/4);
height: calc(100%/4);
}
}
#media screen and (min-width: 481px) and (max-width: 768px) {
.photos img {
width: calc(100%/2);
height: calc(100%/2);
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.photos img {
width: calc(100%/2);
height: calc(100%/2);
}
}
#media screen and (max-width: 320px) {
.photos img {
width: 100%;
height: 100%;
}
}
How can I place a row of 4 square images that reduce into 2 rows of 2 square images using flexbox, with 40px between everything including the sides
Unable to get a 40px gap between images, messes with calc grid, not sure on how to easily create a grid with 40px gap between everything (including by the edges of the page)
I've been working with grid layout, it's working fine in all browsers except in IE
Issue with grid layout in IE11
Now i've been trying the same structure with flex 3 cols * 2 rows but somehow it is not getting as expected because of spaces for the last 2 boxes.
Hope you can help me out with your suggestions either in the grid issue Issue with grid layout in IE11
or with the flex
.grid_container{
margin: 10px auto;
max-width: 1100px;
width: 100%;
height: auto;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
.box-item {
width: 30%;
height: auto;
position: relative;
}
.box-item img {
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
min-height: 200px;
}
.box-text {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.3rem;
font-weight: 400;
color: white;
}
#media only screen and (max-width: 1200px) {
.box-item {
width: 45%;
}
}
#media only screen and (max-width: 1200px) {
.box-item {
width: 90%;
}
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width: 320px) {
}
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 479px) {
}
#media only screen and (max-width: 767px) {
}
/* Tablets potrait----------- */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Tablets (portrait and landscape) ----------- */
#media only screen and (min-width: 768px) and (max-width: 1024px) {
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*--------#media only screen and (min-width: 992px){ } ----------- */
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1224px) {
}
/* Desktops and laptops ----------- */
#media only screen and (min-width: 1400px) {
}
<div class="grid_container">
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
<div class="box-item">
<img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
<div class="box-text">
dummy text
</div>
</div>
</div>
You may add this to the css which mimics flex display fo IE:
_:-ms-lang(x),
.ie10up {
/* IE10+ CSS styles go here */
.grid_container {
margin: 10px auto;
max-width: 1100px;
width: 100%;
height: auto;
display: inline-table;
}
.box-item {
position: relative;
display: inline;
text-align: center;
}
}
Add the following code to your exiting one. Please update the width to take 1/3 of total width. Also add max-width so that it doesn't exceed that width.
.box-item {
width: 33%;
max-width: 33%;
}
<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 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 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%;
}
}