This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 5 months ago.
I want to build this layout so my images, that are in 2nd and 3rd row take remaining space, to go all the way to first row. I just displayed flex and set flex-wrap: wrap. But that does not solve my problem. This is what i want
use column-count for the container of images check here for more info
function getRandomSize(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
var allImages = "";
for (var i = 0; i < 30; i++) {
var width = getRandomSize(200, 400);
var height = getRandomSize(200, 400);
allImages += '<img src="https://placekitten.com/'+width+'/'+height+'?random='+i+'" alt="gallery photo">';
}
$('#photos').append(allImages);
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
#media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
#media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
#media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
#media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="photos"></section>
Related
I have a business directory here it is https://www.endustri.io/firma/
I am listing the categories in five columns. When i looked the mobile i was shocked. Really bad looking. How can fix this?
I want to see mobile version look like desktop, or better than this time.
Here is my css code
#native {
width: 100%;
height: min-content; /*your fixed height*/
display: inline-block; /*necessary*/
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
This is desktop
And this is mobile
You could solve it by changing column-count on mobile devices to, for example, 2. You can target mobile devices with #media screen of specific range:
#media screen and (max-width: 767px) {
#native {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
Always write CSS in Mobile First Methodology: And your solution for this question is below
#native {
width: 100%;
height: min-content; /*your fixed height*/
display: inline-block; /*necessary*/
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
#media screen and (min-width: 768px) {
#native {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
#media screen and (min-width: 992px) {
#native {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
#media screen and (min-width: 1200px) {
#native {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
Ive been working with the new CSS Grid Layout and one thing I can't seem to find much info on is how to make images responsive?? I've tried using media queries and setting the image width to 100% but the image still overflows outside of the grid. What am I missing?
You can use below concept :
function getRandomSize(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
var allImages = "";
for (var i = 0; i < 25; i++) {
var width = getRandomSize(200, 400);
var height = getRandomSize(200, 400);
allImages += '<img src="https://placekitten.com/'+width+'/'+height+'" alt="pretty kitty">';
}
$('#photos').append(allImages);
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
#media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
#media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
#media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
#media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="photos"></section>
Provide imd default styles of max-width:100% and avoid using fixed width and height. Hope it is helpful to you.
I'm building a mobile webapp using CSS columns:
When viewed on a phone, I want the content section to be single column.
When it's on a tablet in portrait, I want the content area to have two columns.
And when it's in landscape, I want it to have three.
It works perfectly on load or refresh, but the column count doesn't change on orientation change.
Here's the relevant CSS:
#media (min-width: 320px) {
main {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
#media (min-width: 768px) {
main {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
#media (min-width: 960px) {
main {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
And here's a link to the page: http://bushidodesigns.net/bd
So, I figured it out: if you apply the column count to an html tag, it doesn't update on orientation change. You need to have a class. In other words, this works:
#media (min-width: 960px) {
.my-div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
This does not:
#media (min-width: 960px) {
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
I am trying to get these columns to show vaguely under these conditions:
When on a phone -- show one column (at 100%)
When on a tablet -- show two columns (at 50%)
When on a desktop -- show as many as will fit
Here is my CSS code thus far but it's not working as expected:
EDIT: I modified the media queries a bit and the background color is changing as expected...but the widths are not. To re-iterate...on small devices I want DIV's to take up 100% screen width...on tablets I want them to split the screen in half...and on desktop screens I want them to spread across the entire width of screen accordingly.
#media screen and (max-width: 35.5em) { /* 568px or less */
div.listing {
-moz-columns: 100%;
-webkit-columns: 100%;
columns: 100%;
background-color: red;
}
}
#media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
div.listing {
-moz-columns: 50%;
-webkit-columns: 50%;
columns: 50%;
background-color: orange;
}
}
#media screen and (min-width: 48em) { /* 1024px */
div.listing {
-moz-columns: 350px;
-webkit-columns: 350px;
columns: 350px;
background-color: green;
}
}
Actually, your columns are working exactly as expected. Check out the spec: http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns
The issue is that column-width is the minimum width. If you set your columns to be 50% the column will always default to 100% because no matter what, the column will always be at least half of it's container (I probably explained that weird). You basically need to set a desired em or px size for your tablet view. Or, as Adriano66 pointed out, set the number of columns, and not a width.
#media screen and (max-width: 35.5em) { /* 568px or less */
div.listing {
-moz-columns: 100%;
-webkit-columns: 100%;
columns: 100%;
background-color: red;
}
}
#media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
div.listing {
-moz-columns: 2;
-webkit-columns:2;
columns: 2;
background-color: orange;
}
}
#media screen and (min-width: 48em) { /* 1024px */
div.listing {
-moz-columns: 350px;
-webkit-columns: 350px;
columns: 350px;
background-color: green;
}
}
Fiddle:
http://jsfiddle.net/disinfor/a65pb9re/1/
I don't think u can use percentages this way, try typing 1 instead of 100% which equals to 1 column and 2 instead of 50% which equals to 2 columns
#media screen and (max-width: 35.5em) { /* 568px or less */
div.listing {
-moz-columns: 1;
-webkit-columns: 1;
columns: 1;
background-color: red;
}
}
#media screen and (min-width: 35.5em) and (max-width: 48em) { /* 568px - 768px */
div.listing {
-moz-columns: 2;
-webkit-columns: 2;
columns: 2;
background-color: orange;
}
}
#media screen and (min-width: 48em){ /* 1024px */
div.listing {
-moz-columns: 350px auto;
-webkit-columns: 350px auto;
columns: 350px auto;
background-color: green;
}
}
Fiddle: http://jsfiddle.net/wprdhswr/1/
https://developer.mozilla.org/en-US/docs/Web/CSS/columns
I have created a three columns grid template with 33% width each. I was hoping if someone would be willing to show me how to set up css so when I minimize the screen to 750px, the template will become a two columns template with 50% width each.
Thanks.
You can do it with #media queries, like this:
#media only screen and (max-width: 750px) {
#column_container {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
#media only screen and (min-width: 751px) {
#column_container {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}