How to center 1, 2 or 4 ShopIsle frontpage Banners per row

First install our CSS plugin:  Click Here

Go to Appearance->Customize->Advanced CSS Editor

To have 1 centered banner per row add the following snippet of CSS to the Desktop and Tablet CSS area:

.shop_isle_bannerss_section .col-sm-4 {
	width: 100%;
} 

To have 2 centered banners per row add the following snippet of CSS to the Desktop and Tablet CSS area:

.shop_isle_bannerss_section .col-sm-4 {
	width: 50%;
} 

To have 4 centered banners per row add the following snippet of CSS to the Desktop and Tablet CSS area:

.shop_isle_bannerss_section .col-sm-4 {
	width: 25%;
}

Now save your changes.

If you are using another CSS plugin such as Simple Custom CSS or via your child theme style.css/custom.css then you could use a media query with the snippet which will cover both tablets and desktops like this ( it will center two banners, change the % to 100 for 1 banner):

@media screen and (min-width: 768px){

.shop_isle_bannerss_section .col-sm-4 {
    width: 50%;
}

}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us