Flatsome Theme, CSS Messup Fix

Flatsome theme has some strange CSS rule that element having class “row” and class “row” child elements must have class “col” to avoid 100% width. This rule messes up the whole CSS of any plugin applying its CSS. Furthermore, the same problem occurs with Agile Store Locator. Moreover, the rule which conflicts with our plugin is provided below.

.row > div:not(.col) {
    width: 100% !important;
}

The above CSS rule interprets as every “row” child div tag must have a class “col”. Otherwise, its width would be 100%, which is pretty weird.

This problem in Agile Store Locator can be fixed with the script provided below. Simply add the script on your page where the Agile Store Locator is rendering.

<script type="text/javascript">
jQuery(function(e){
	jQuery('#asl-storelocator .row > div:not(.col)').addClass('col');
});
</script>

In case you see some extra space at the bottom of the Store Locator, change the above script to the one below.

<script type="text/javascript">
jQuery(function(e){
	jQuery('#asl-storelocator .row > div:not(.col)').addClass('col').css('padding-bottom','0px');
});
</script>