How do i move the text in the home page image banner

[FFPNF]

Hi 

Is there anyone that can help me with the coding to move the text in the home page image banner 

It is currently selected as centralised but i wish to move it up further to the top so it will not block my image too much. 

Any help is much appreciated. 

Thanks 

 

[PageFly-Victor · Accepted solution]

Hi @FFPNF ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
@media (max-width: 767px){
.banner__box.content-container.content-container--full-width-mobile.color-accent-2.gradient {
    padding-top: unset;
    position: relative;
    top: -60px
}
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[oscprofessional · Accepted solution]

Hello @FFPNF 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 749px){
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    position: absolute;
    top: 0;
    bottom: 0;
}
}

[PageFly-Victor · Accepted solution]

Hi @FFPNF ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
@media (max-width: 767px){
.banner__box.content-container.content-container--full-width-mobile.color-accent-2.gradient {
    padding-top: unset;
    position: relative;
    top: -60px
}
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[FFPNF]

Hi Victor 

This works for mobile. 

If i wish to change it on desktop, is there another code? 

[oscprofessional · Accepted solution]

Hello @FFPNF 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.banner__content {
    padding: 2rem !important;
}

[nini12]

Do you have one for mobile version? 

[oscprofessional · Accepted solution]

Hello @FFPNF 

You can try this code: it will be helpful to you 

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 749px){
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    position: absolute;
    top: 0;
    bottom: 0;
}
}

[FFPNF]

@oscprofessional thank you so much. it works 

[oscprofessional]

Hello @FFPNF 

If my solution is helpful to you please like my post

[babystore123]

Hi! I'm having a similar issue. I would be so thankful for your help! Could you send me a message?