Taste Theme: Change Size and Alignment of Image Banner (Single Page)

Store Design
1

Hi All,

I am working with the Taste Theme and would like to change the image banner size and alignment on a new page template that I created (based on the default page). I have been able to locate the banner size within the section-image-banner.css file but when I change the size here (from 100% to say 70%), the banner aligns left and I cannot figure out how to center it.

I have searched the community but have not found a solution that works.

Thanks in advance!

2

Please share the store preview URL with the banner left aligned, we will provide you with the code to center align it.

3

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

4

@Hunter08 Please share your store URL and password(If it is password protected.). So that I can check and give you the exact solution.

5

@Hunter08

Please share your store URL and storefront password if the store is password Protected.

Thanks!

6

Hello @Hunter08 ,

Follow the below steps to change the size and alignment of the image banner.

Step 1: Go to the Theme settings :

Tick both of the options which show in the below screenshot.

Cedcommerce_0-1662383948334.png
Cedcommerce_0-1662383948334.png1600×754 220 KB

Step 2: Go to the edit code and search the file name “image-banner.liquid” add a custom class which is “custom_banner”.as shows in the below screenshot.

Cedcommerce_1-1662383948206.png
Cedcommerce_1-1662383948206.png1600×754 134 KB

Step 3: Go to the “section-image-banner.css” file .and add some CSS which is written below:

@media (min-width:749px){

.custom_banner .banner {

width: calc(100% - 30%);

margin: 0 auto;

}

Result:-

Cedcommerce_2-1662383948149.png
Cedcommerce_2-1662383948149.png1600×900 153 KB

Hope it helps, let us know if it works or you need any further help.

All the best,

Team CedCommerce

7

Thank you so much! This worked perfectly.

8

Hey! @Hunter08

We’re glad to hear that. Keep growing!!