Horizontal Display
-
Hi.
Is there a way to show the reviews horizontally (3 columns) instead of vertically, in a responsive way?
Thanks!
Viewing 4 replies - 1 through 4 (of 4 total)
-
These types of visual customisations can be done with some custom CSS. Please see the following links for pointers on how to use flexbox to create the type of layout you need with CSS:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
http://flexboxfroggy.com/Here is some custom CSS to get you started:
.glsr-reviews { display: flex; flex-wrap: wrap; margin: 0 1.5em; } .glsr-review { flex-basis: 100%; border: 1px solid #13596B; padding: 0.75em; margin: 0 1.5em 3em; } @media (min-width: 768px) { .columns-3 .glsr-review { flex-basis: calc(50% - 3em); } } @media (min-width: 1024px) { .columns-3 .glsr-review { flex-basis: calc(33.33% - 3em); } }Tip: If flexbox is used (as in the example above), make sure to use https://autoprefixer.github.io/ to add the vendor prefixes for older browsers.
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Horizontal Display’ is closed to new replies.
