How can I position text and add a partition in my image banner design?

Store Design
1

Image 1 - Desired Design (Explore our collections is positioned separately down in middle. Also how can i add a partition below if as shown in the image??).

Img 1
Img 11080×620 42.4 KB

Img 2
Img 22880×1384 342 KB

Image 2 - Designed i’m stuck with.

2

Hi @obito_uchiha01

Could you drop your store link?

3

store link - https://6b771c-3.myshopify.com/
password - jewelsmisa

4

@obito_uchiha01

Go to your Online store > Themes > Edit code > Assets, open base.css and add this code at the bottom

@media (min-width: 768px){
#Banner-template--16902098452735__image_banner .banner__text {
    position: absolute !important;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%);
}
}

Screenshot_1.jpg
Screenshot_1.jpg1261×710 73.7 KB

5

Screenshot 2023-11-06 at 5.26.56 PM.png
Screenshot 2023-11-06 at 5.26.56 PM.png2880×1398 345 KB

The code works but it is now positioning the above text “Your Everyday Collection” also down below which is overlapping with “Explore Our Collections” below.

6

Hi @obito_uchiha01

Please update code like this

@media (min-width: 768px){
#Banner-template--16902098452735__image_banner .banner__text:first-child {
    position: absolute !important;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%);
}
}