logo

Agile Store Locator - Knowledge Base

Flatsome theme, CSS Messup Fix

Flatsome theme has some strange CSS rule that element having class "row", class "row" child elements must have class "col" to avoid it 100% width, this rule messup the whole CSS of any plugin applying it's CSS. Same problem occurs with Agile Store Locator, the rule which conflicts with our plugin is provided below.


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

The above CSS rule interpret as every "row" child div tag must have a class "col", else it's width would be 100%, which is pretty weird.

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


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

Incase you see some extra space at the bottom of the Store Locator, change the above script to this below.


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