Hi! I am trying to use the Salient Studio Icons with text & column bg hover template on my pages. They look and work great on desktop but on smaller screens like tablets and phones, when the icons and text move below the first columns the text starts overflowing and they combine with the columns below. The text also overflow on diferent rows aand footer. This happens on all pages but only using this element, not on other rows.
This custom css is causing the issue . Try using min-height instead : http://prntscr.com/gl18m2 or wrap it in a media query so it doesnt work on Mobiles.
Hi! I am trying to use the Salient Studio Icons with text & column bg hover template on my pages. They look and work great on desktop but on smaller screens like tablets and phones, when the icons and text move below the first columns the text starts overflowing and they combine with the columns below. The text also overflow on diferent rows aand footer. This happens on all pages but only using this element, not on other rows.
https://www.wildcanyon.com.mx/8834-2/
https://www.wildcanyon.com.mx/8830-2/
Hey ,
This custom css is causing the issue . Try using min-height instead : http://prntscr.com/gl18m2 or wrap it in a media query so it doesnt work on Mobiles.
Best
ThemeNectar Support Team
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
@media only screen and (max-width: 1000px) and (min-width: 1px) { .full-width-content.vc_row-fluid .vc_col-sm-3 { height: auto !important; } }Thanks
ThemeNectar Support Team
I think it works, thanks!