Move image banner button

[Jferguson1]

Hi there,

Trying to move the image banner button down, but the adjustable code i have right now has reached its limit (anything over 450px has no effect on the placement). 

This is the code im working with:

<style>
.banner__box {
margin-top: 900px; 
}
</style>

here is what it looks like:

 

And i want the button to sit under the content. 

Thank for in advance!

https://www.tryy.co.uk

password - help

many thanks!

[Made4uo-Ribe · Accepted solution]

Hi @Jferguson1 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

And Save.

.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

And save.

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ThePrimeWeb]

Add on this

<style>
.banner__box {
    margin-top: 900px; 
    transform: translateY(165px) !important;
}
</style>

 

[Jferguson1]

 Hi - thanks for getting back to me.

The code has moved the button to the button of the screen, however it has interfered with the size of the banner image.

Before the code:

 

After the code:

Is there a way to keep the size of the banner image intact?

Many thanks, Joe

[ThePrimeWeb · Accepted solution]

The size is being changed by the margin of 900px you added earlier. If you want to remove that, just increase the px value in the transform property.

<style>
.banner__box {
    transform: translateY(550px) !important;
}
</style>

 

[Made4uo-Ribe · Accepted solution]

Hi @Jferguson1 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

And Save.

.banner__content.banner__content--middle-center.page-width.scroll-trigger.animate--slide-in {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

And save.

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Jferguson1]

lovely - thank you. and thanks for showing me some text hadnt been embedded.