Solved

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

FFPNF
Tourist
16 0 1

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 

94A1B093-D546-4450-A6C9-D4E6CB38C721.jpeg

Accepted Solutions (3)

PageFly-Victor
Shopify Partner
7865 1785 3043

This is an 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>

PageFlyVictor_0-1681541062628.png

Hope my answer will help you.

Best regards,

Victor | PageFly

banned

View solution in original post

oscprofessional
Shopify Partner
15750 2357 3059

This is an 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;
}
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
15750 2357 3059

This is an 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;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 7 (7)

PageFly-Victor
Shopify Partner
7865 1785 3043

This is an 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>

PageFlyVictor_0-1681541062628.png

Hope my answer will help you.

Best regards,

Victor | PageFly

banned
FFPNF
Tourist
16 0 1

Hi Victor 

 

This works for mobile. 

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

oscprofessional
Shopify Partner
15750 2357 3059

This is an 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;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

oscprofessional
Shopify Partner
15750 2357 3059

This is an 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;
}
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
FFPNF
Tourist
16 0 1

@oscprofessional thank you so much. it works 

oscprofessional
Shopify Partner
15750 2357 3059

Hello @FFPNF 

If my solution is helpful to you please like my post

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
babystore123
Excursionist
41 1 2

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