How would I go about making CSS changes so that my 4-column and 2-column elements (for example, rows of milestones and rows of pie charts on my front page: http://nathanmfarrugia.com) remain at 2 columns under 690px?
Would you be able to give me some example CSS rules I can use to enforce the change please? Currently if you view my website under 690px width, all the milestones and pie charts shift from 2 per row to 1 per row. This becomes a bit annoying on a mobile device. I'd like to keep it as 2 per row at all times! :)
Hi!
How would I go about making CSS changes so that my 4-column and 2-column elements (for example, rows of milestones and rows of pie charts on my front page: http://nathanmfarrugia.com) remain at 2 columns under 690px?
Would you be able to give me some example CSS rules I can use to enforce the change please? Currently if you view my website under 690px width, all the milestones and pie charts shift from 2 per row to 1 per row. This becomes a bit annoying on a mobile device. I'd like to keep it as 2 per row at all times! :)
Thanks!
Nathan
Hey Nathan,
add this into the Custom CSS box located in your Salient Options panel:
@media only screen and (max-width : 1000px) { body .vc_row-fluid .wpb_column.vc_span3, body .vc_row-fluid .wpb_column.vc_span6 { padding: 15px!important; width: 48% !important; } }Cheers!
Excellent, thank you!
I made a few more adjustments for <480px as well.
@media only screen and (min-width : 1px) and (max-width : 480px) { .vc_responsive div.vc_row-fluid div[class*="vc_span"] { float: left!important; } body .vc_pie_chart .vc_pie_chart_value { font-size: 28px; } }Cheers,
Nathan