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: