Debut - Button Position (Image with Overlay)

HarveySpecter
Tourist
10 0 1

Hi guys,

I'm sorry, but I'm really stuck!
Every code I've asked for so far just does NOTHING ... I'm going crazy!

I would like to move the "Call to Action" button freely within the picture.

I also found out the Section ID via "Chrome - Shopify Inspector" ... but nothing helps.


Url:
www.prettylittlestuff.de

Password: peuffo


If someone has some advice that would be really great ..... for coders a simple thing ... hell for me!

THANKS


PS:
Below my previously inserted codes:

 

 . . . . . .  . . 

.hero__inner {
    padding: 20% 0 0 0;
}

/*Einstellung, das der ganze Header Bereich auch MOBIL zu sehen ist*/
@media only screen and (max-width: 749px) {
.hero[id]{
  background-size: contain !important;  
  width: 100% !important;
}

/*MOBILE ANSICHT größe des CTA Buttons*/
@media only screen and (max-width: 749px) {
#shopify-section-1631746381523edf89 a.btn.hero__btn { font-size: 5px !important; }
}

/*MOBILE ANSICHT größe des CTA Buttons Kohlemaske*/
@media only screen and (max-width: 749px) {
#shopify-section-163174745094a8214d a.btn.hero__btn { font-size: 5px !important; }
}

/*DESKTOP ANSICHT Position des CTA Buttons Kohlemaske*/
#shopify-section-163174745094a8214d .hero__btn {
    top: 1px;
    margin-top: 1500px;
}

 

 

Bildschirmfoto 2021-09-16 um 13.41.24.jpg

Replies 10 (10)
HarveySpecter
Tourist
10 0 1

Ok, at least I know which setting in the backend is responsible:

Theme Editor -> Homepage -> Image with Textoverlay -> Area Height

=> If I select the option "Fit to picture" in the area height, the CTA button is always centered in the desktop view. If I choose one of the other options, the position of the CTA button also changes in the desktop view.

In the mobile view, I can change the position of the CTA using the codes, these now fit.


Can I change the position problem for the desktop view as well? I need the "Fi to Picture" Option.