Minimal Theme: Move "Shop Now" Button & Text Layout onto Hero Banner in mobile version

[RETROAREA]

Hey there! I hope a Shopify Coding Pro can help me out with this important layout issue. I am currently really struggling to adjust the mobile design of my banner to the same design as shown in the desktop design version of my shop with scss-liquid. I am using the Minimal theme and my URL is: www.retroarea.de

If anyone has an idea how to solve the issue of making the banner appear the same on the mobile version as on the desktop version, it would be an amazing help. I have tried to use the code below, but I still have 2 major issues:

1. Text + Code is placed below the image on mobile version and not in front of it
2. Text is still black and not white

Left (Mobile Version), Right (Desktop Version)

My attempted coding, I have put in the end of my theme.scss.liquid**:**

@media screen and (max-width: 768px){
#flexslider–slider .slides__image{ object-fit: contain !important; height: 230px !important; }
.slides__text-content–mobile{ position: absolute !important; top: 48%; }
}
.slides__text-content{ top: 75% important; }
/* code for slider button for mobile */
.slides__btn–mobile {
display: inline-block;
color: #fff;
padding: 15px 12px;
font-size: 0.6em;
line-height: 1.2;
min-height: 1.125rem;
}

THANK YOU! David

[KetanKumar]

@RETROAREA

sorry for that issue can you please confirm this look

[RETROAREA]

Hello Kumar, first of all thank you for your help! I appreciate it a lot.

The result you have posted would be great, is it possible to make slight changes?

1. “RETROAREA.” text larger
2. Shop Now Button smaller on the sides, minimizing the colored space to the left and right, while keeping the shop now text the same

Thank You!

[KetanKumar]

@RETROAREA

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 768px) {
.slides__title {display: inline-block;}
.slides__title+.slides__btn {
    margin-top: 20px;
    display: inline-block;
}
.shopify-section:first-child .index-section {padding: 0 !important;}
.slideshow__mobile-text-container {display: none;}
}

[RETROAREA]

Hey there!

It worked partly, the text and button are displayed twice now (as seen on picture) below and on the banner.

[KetanKumar]

@RETROAREA

oh sorry i have miss one code but now i have update again please try again full code

[RETROAREA]

Thank you! Could you send me the updated code, would be super helpful.

[RETROAREA]

It worked now! Thank you so much!

[KetanKumar]

@RETROAREA

its my pleasure to help us