Issue
i am trying to make a responsive multi column text aria with bootstrap. i tried looking online but could not find what i need.
this is an example of what i am trying to do, but i would like to make it responsive that with the screen gets small everything should be on one column http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-rule-width
any pointers will be very much appreciated. thank you.
Solution
Use CSS media queries to adjust properties for screen width. Example of your solution
@media (min-width: 1200px) {
.example {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
}
@media (min-width: 600px) and (max-width: 1200px) {
.example {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
}
@media (max-width: 600px) {
.example {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
}
Answered By - Olexandr Petrov
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.