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

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

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