I've got 4 columns with a bg border/color that look good on desktop and phone in terms of having an adequate amount of spacing between all sides of each column; however, on a tablet, the adjacent spacing is nonexistent.
But since these columns are part of an inner row, I'm a bit confused on how to add the appropriate / balanced amount of spacing around each column.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 690px) {
.full-width-content.vc_row-fluid .vc_custom_1521690149165 .one-fourths.vc_col-sm-3:not([class*="vc_col-xs-"]) {
width: 48% !important;
margin: 1% !important;
}
}
Hi
I've got 4 columns with a bg border/color that look good on desktop and phone in terms of having an adequate amount of spacing between all sides of each column; however, on a tablet, the adjacent spacing is nonexistent.
But since these columns are part of an inner row, I'm a bit confused on how to add the appropriate / balanced amount of spacing around each column.
What would you recommend?
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.wpb_row >.span_12 >.column_container:last-child { margin-bottom: 2% !important; }Thanks
ThemeNectar Support Team
I should have clarified. I'm trying to add space to where the columns meet in the middle. See attachment for redlined reference.
Thank you! (and sorry for being confusing)
Slight edit: I've changed the parent container to "full width content" from "full width background".
I still need help creating fixed height/width spacing for these columns on this inner row though. Thank you!
(see updated attachment for reference)
I've added some screenshots from this salient page that demo what I'm wanting to achieve: http://themenectar.com/demo/salient-promo/columns
Hey Again,
This will have to be custom coded bu reducing the column width and adding margin to it .
See Screenshot: http://prntscr.com/ivokze .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 690px) { .full-width-content.vc_row-fluid .vc_custom_1521690149165 .one-fourths.vc_col-sm-3:not([class*="vc_col-xs-"]) { width: 48% !important; margin: 1% !important; } }Thanks
ThemeNectar Support Team