Banner: Change vertical alignment of heading and button

Pipeline 4:

/* -- code to adjust vertical alignment for Image with text overlay -- */
#shopify-section-index-banner-image:first-of-type .content--centered {top: 25%;}
/* - end - */

Or, earlier versions of Pipeline:

/* -- code to adjust vertical alignment for Image with text overlay -- */
.homepage-image:first-of-type:not(.homepageVideo):not(.slick-slide) .content--centered {top: 75%;}
/* - end - */

You can adjust the position by changing the value:

75% is lower on the section

25% is higher on the section

Note: This code targets the first Image with text overlay section. 

When using custom banners for desktop and mobile

Sample code if you're using our custom Banner for Desktop and Mobile sections:

/* -- code to adjust vertical alignment for Image with text overlay for banner desktop -- */
.banner-desktop .content--centered {top: 25%;}
/* - end - */

Mobile:

/* -- code to adjust vertical alignment for Image with text overlay for banner mobile -- */
.banner-mobile .content--centered {top: 25%;}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us