Solved

How can I change the size and positioning of the Image banner text on Dawn 2.0?

Dike
Pathfinder
105 1 41

Hello everyone,

Because of the limited options I have added graphic text on the image itself, but when resizing the screen, the button tends to overlap with the text.

So using the text format that Shopify provides must be the best solution to prevent this (please let me know if there are other ways!), but it wont let me recreate what I currently have.

Screen Shot 2021-10-31 at 15.22.45.png

I was wondering how I could come close to this with Shopify's editor. 

I've also noticed that the button leaves the picture when going on the mobile format. How can I fix this?

Thank you so much!

URL: https://glowee.nl/

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Dike 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media screen and (max-width: 990px) {
#shopify-section-template--15290490290398__image_banner .banner__box.color-background-1 {
    padding: 0;
    margin-top: -80px;
    margin-bottom: 0;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 17 (17)

KetanKumar
Shopify Partner
36839 3635 11972

@Dike 

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 992px) {
#shopify-section-template--15290490290398__image_banner .banner__content.banner__content--flex-end.page-width {
top: -75px !important;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dike
Pathfinder
105 1 41

Thank you for your reply!

I did this and the button moved on top of the text. I would like to keep it under it, as I think it looks nicer.

Screen Shot 2021-10-31 at 16.01.09.png

Dike
Pathfinder
105 1 41

-ignore this message-

KetanKumar
Shopify Partner
36839 3635 11972

@Dike 

what do you need?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dike
Pathfinder
105 1 41

I would like to have the button stay on a fixed place, under the text. 

And when switching to mobile format, to have the button stay on that place as well.

Screen Shot 2021-10-31 at 16.11.47.png

This is what it currently looks on mobile.

Thank you so much.

KetanKumar
Shopify Partner
36839 3635 11972

@Dike 

can you please confirm look at mobile?

KetanKumar_0-1635703549782.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Dike 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media screen and (max-width: 990px) {
#shopify-section-template--15290490290398__image_banner .banner__box.color-background-1 {
    padding: 0;
    margin-top: -80px;
    margin-bottom: 0;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dike
Pathfinder
105 1 41

Thank you so much for your help! 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@Dike 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bluesea
Excursionist
24 0 7

Hi, I meet a similar issue, I add 2 buttons at image banner section, the text is centered but the buttons go to left as below.

I checked image-banner.liquid and section-image-banner.css, but can not find the code about the button position.

Can you help me to fix it? Thank you!

The theme is Dawn.

Bluesea_0-1636356902295.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@Bluesea 

sorry for that issue

please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bluesea
Excursionist
24 0 7

Hi @KetanKumar 

Here is my store https://www.blueseaclothing.com/

Now I just add one button and it is centered, but I want to add another one and hope them still centered.

KetanKumar
Shopify Partner
36839 3635 11972

@Bluesea 

thanks for store url but i can't see 2 button at home page any section 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bluesea
Excursionist
24 0 7

@KetanKumar  can you check again, I add the 2nd button just now

KetanKumar
Shopify Partner
36839 3635 11972

@Bluesea 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

.banner__box>*+.banner__buttons--multiple {margin: 2rem auto 0px ;}

After Code view 

KetanKumar_0-1636548059155.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Bluesea
Excursionist
24 0 7

@KetanKumar It worked! Thank you so much!

KetanKumar
Shopify Partner
36839 3635 11972

@Bluesea 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing