Created an Extra Class style for several text elements, they are not scaling on mobile—the headline text element is too big and bleeds off the screen. Is there a way to ensure the font-size scales down on mobile? Tried adjusting mobile values in the custom responsive settings with no success.
Also, what is the best way to adjust the space between stacked columns on mobile? (see attachment)
Thank you in advance! The support on the public tickets are great!
The css Andrew shared successfully reduces the space between the first two text elements, but the "2018" text element is unaffected. Any tips on how to reduce the space between "food & beverage" and "2018" text? In the WP-page builder, these two text elements are setup as two separate columns in the same row.
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: 690px) {
body .vc_row-fluid .wpb_column {
margin-bottom:0px!important;
}
}
Created an Extra Class style for several text elements, they are not scaling on mobile—the headline text element is too big and bleeds off the screen. Is there a way to ensure the font-size scales down on mobile? Tried adjusting mobile values in the custom responsive settings with no success.
Also, what is the best way to adjust the space between stacked columns on mobile? (see attachment)
Thank you in advance! The support on the public tickets are great!
The following CSS allows me to set the font-size on mobile.
/*font-size mobile for .projecttitle*/
@media only screen and (max-width: 600px) {
.projecttitle h1{
font-size: 36px!important;
line-height: 1.2em;
}
Hey there,
Thanks for reaching in,
Please try this CSS in Salient > General Settings > CSS/Script Related > Custom CSS Code
@media only screen and (max-width: 690px) { h3.vc_custom_heading { line-height:0px!important } }Seems you figured out the font size though;
Regards
Perfect!
Do you need to set up a custom row class to reduce the spacing between "food & beverage" and "2018" text?
No its not needed at the moment.
Best
ThemeNectar Support Team
The css Andrew shared successfully reduces the space between the first two text elements, but the "2018" text element is unaffected. Any tips on how to reduce the space between "food & beverage" and "2018" text? In the WP-page builder, these two text elements are setup as two separate columns in the same row.
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):
@media only screen and (max-width: 690px) { body .vc_row-fluid .wpb_column { margin-bottom:0px!important; } }Thanks
ThemeNectar Support Team
Thank you Tahir! Worked beautifully.