How do I move the image banner text before the image instead of on the image in dawn theme?

[SweatFree]

Hi,

My website is www.sweatfree.co

My password is sweatfree123

In you scroll to the bottom of the page then right before footer you’ll see a few logos in the form of an image banner. I want to add a header and text description, but when I add it, it goes on top of the image. Instead I want it to be before the image, just like collection header and text description is before the collection. How do I do it?

[Sweans]

Hi @SweatFree ,

It appears that you’ve used an image banner with text for the logos banner and entered the text within the same element’s field. As a result, the text displays above the image. To position the text before the image, code modifications are required to adjust the layout.

However, this can be achieved by adding a Rich Text block above the image and entering the content in the input field as demonstrated in the screenshot.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[BSS-TekLabs]

• Here is the solution for you @SweatFree
• Please follow these steps:

• Then find the base.css or theme.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

#Banner-template--14927606710354__image_banner_nNhqxh {
     margin-top: 50px !important;
}
#Banner-template--14927606710354__image_banner_nNhqxh.banner--desktop-transparent .banner__box {
     top: -295px !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[SweatFree]

Hi @BSS-TekLabs on desktop it works perfectly. But on mobile the text actually goes above the previous section. Could you please check?

Here is the screenshot:

[BSS-TekLabs]

#Banner-template--14927606710354__image_banner_nNhqxh {
     margin-top: 50px !important;
}
#Banner-template--14927606710354__image_banner_nNhqxh.banner--desktop-transparent .banner__box {
     top: -295px !important;
}
@media only screen and (max-width: 600px) {
#Banner-template--14927606710354__image_banner_nNhqxh {
     margin-top: 81px !important;
}
#Banner-template--14927606710354__image_banner_nNhqxh.banner--desktop-transparent .banner__box {
     top: -116px !important;
}
}

Can you try this code @SweatFree

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[SweatFree]

Hi @BSS-TekLabs first of all thank you again. Quick request: on phone it looks great! Even on wide desktop (fullscreen) it looks great! But on regular desktop now it goes again on top of the previous section. Screenshot attached. If you had any advice on how to do that as well.