I arrange the cards with <div class=col-xs-3> for example, to show a layout with 3 cards per row. In a PC this shows correct, but in smaller screens the cards occupy the full width of the screen.
What I’m doing wrong? Maybe I have to modify a .css file but I can’s find anything.
Thanks in advance!
Hi @mats, col-xs-* kicks in when the width of the viewport is greater than 480px, if you want to show three cards per row regardless of the size of the screen estate, you should use col-xx-*.
Additionally, there are also col-sm-* which kicks in when browser is wider than 768px (tablet portrait), col-md- which kicks in when browser is wider than 992px (small desktop, tablet landscape), and finally col-lg-* for large desktop monitors which kick in when browser is wider than 1440px.
All these different classes help you build a fluid grid system that appropriately scales up to 12 columns as the device or viewport size resizes.
2 Likes
Thank you! I didn’t know the col-xx class, I’ll try that…