Is there a way to specify how each column will behave on each breakpoint? For example, 3 equal columns at full screen, but then 2 quarter width columns and one half width column for tablet, and then stacked for phones.
There’s only an option to degrade to 100% width with x-xs), x-sm and x-md (Tablets and Below), but is there a way to specify how they will degrade? Say class=“x-sm-1-1 , x-sm-1-4, x-md-1-2”.
Thanks.
Hi There,
Thank you for writing in, please utilize the Hide Base on Screen Width feature. Add ROWs that will represent each breakpoints (e.g 3 columns for screens 768px – 979px and 2 columns for Small screens 481px – 767px ).
Hope it helps,
Cheers!
Thanks @friech. Will this bloat up my site? On account of having to load the same content multiple times. I was hoping to avoid that.
Hi there,
It has its downsides for sure, but as the whole section will not render it will not have the affect on the front end. But the overall source code will be a little bit bloated.
At the time being, you have that option at hand regarding the options, you also can code custom CSS for that specific case to change things around if needed.
Thank you.
Thanks @christopher.amirian. I like the idea of coding custom CSS; is there a way to know the base grid classes so I can design accordingly? More specifically, I’d like to know the percentages for widths, padding, and margin so I can code them accurately.
Hello There,
Here are the widths and margins of the columns:
Margins
Widths:
As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.
Thank you for your understanding.