Narrative Theme Code - Repositioning the button on 'Image with text overlay'

Store Design
1

Hi there,

I’m posting here in the hopes that somebody can help, so thanks in advance.

I am trying to move this ‘Shop Now’ button from my first ‘Image with text overlay’ at the top of the page.

The button is linked to my product page. I have tried a solution posted on a previous question, but it does not work for me:

.hero--large .hero__inner {
padding: 360px 0 180px!important;
}

I simply want to move the button to the bottom centre of the image, as opposed to where it is now.

My site isn’t yet published, but it is roamnappies.com.

Thank you!

Screenshot 2021-08-08 at 14.00.43.png
Screenshot 2021-08-08 at 14.00.43.png2878×1354 766 KB

1 Like
2

The “Image with text overlay” section in Narrative theme use padding to determine the central element position (only button in your case) using the following code.

@media only screen and (min-width: 750px) {
    .hero--large .hero__inner {
        padding: 220px 0;
    }
}

The “Section Spacing” option determined the padding used, for Large is 220px top and bottom.

You can adapt your code by defining your custom padding and add it at the end of file theme.scss

@media only screen and (min-width: 750px) {
    .hero--large .hero__inner {
        padding: 400px 0 40px;
    }
}

For example in this case I set 400px padding for top and 40px for bottom.

You have to tune those values based on your preferences.

3

@KatieC

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site unpublish theme url,
I will check out the issue and provide you a solution here.