This is a quick demo on how to set up responsive columns with Column-Matic. In this demo will will display three columns that will then stack vertically once the screen size drops below a certain width.
The CSS
.my_column {
width: 23%;
margin-left: 5%;
padding-left: 5%;
}
@media (max-width: 450px) {
.my_column {
width: 95%;
margin: 0 auto;
padding: 3px;
clear: both;
border: none;
}
}
Shortcode
[[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[end_columns]]
Result
[column class=”my_column”]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/column][column class=”my_column”]Ex cum quas aeque, alii constituto nam in. Id vocibus mandamus suscipiantur vim, mel ad ipsum convenire maluisset. His vocent accusata torquatos an, ei dicat tation pro, et suavitate definitiones pro. Mei perfecto tincidunt ea, omnesque efficiendi interesset in mei.[/column][column class=”my_column”]Lorem ipsum dolor Cu eam probo phaedrum philosophia, sed eu iisque persius repudiandae. An ferri mollis deseruisse qui, te dicit mnesarchum est, nonumy docendi tincidunt sit cu. Mei at munere admodum.[/column]
[end_columns]
