Debut - Button Position (Image with Overlay)

[HarveySpecter]

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;
}

[oscprofessional]

Hi @HarveySpecter ,

@media only screen and(min-width:769px){
#Hero-163174745094a8214d .hero-fixed-width__content {
    right: -71%;
    top: 74%;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

[HarveySpecter]

thank you for your efforts, but unfortunately nothing changes

[dmwwebartisan]

@HarveySpecter 

Please try this css class

@media only screen and (min-width: 750px) {
#shopify-section-163174745094a8214d .text-center {text-align: right!important;}
#shopify-section-163174745094a8214d .hero__btn {margin-top: 40%;}
}

[HarveySpecter]

thank you for your efforts, but also with code number 2 nothing has changed

[HarveySpecter]

but which is very nice ... the picture can now be seen completely in the mobile view!

At least that has already worked;) ..... but the CTA button has now completely disappeared.

[oscprofessional]

@HarveySpecter ,

remove this margin !

[HarveySpecter]

Oh yes: D, thanks for the hint!

strangely enough, this just changes the position of the button in mobile view. Now i can see the button again 🙂

But nothing changes in the desktop view.

Thank you very much for your help!

Isn't there a CSS code (1 for mobile, 1 x for desktop) with which I can freely determine the position of the CTA button? such as:

from right: 100px
from above: 500px

or somehow like that .....

Sorry, I'm a total layman and try to deal with this CSS.

Kind regards!

[HarveySpecter]

I have now expanded the code ...... in the mobile view it is now also wonderful!

The full width of the image is visible, the button is in the right place!

WHAT I DON'T UNDERSTAND:

The code should actually change the position of the CTA in the desktop view ..... the code for the mobile view is actually only one line below ...

Crazy!

/*DESKTOP ANSICHT Position des CTA Buttons Kohlemaske*/
#shopify-section-163174745094a8214d .hero__btn {
    top: 1px;
  margin-top: 150px;
  margin-right: -260px;
}
  
@media only screen and (min-width: 750px) {
#shopify-section-163174745094a8214d .text-center {text-align: right!important;}
#shopify-section-163174745094a8214d .hero__btn {margin-top: 40%;}
}

[HarveySpecter]

Has anyone a solution for the Desktop View?

[HarveySpecter]

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.