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)
oscprofessional
Shopify Partner
9202 1563 1928

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

 

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
dmwwebartisan
Shopify Partner
9824 2236 3076

@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%;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
HarveySpecter
Tourist
10 0 1

thank you for your efforts, but unfortunately nothing changes

HarveySpecter
Tourist
10 0 1

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

HarveySpecter
Tourist
10 0 1

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
Shopify Partner
9202 1563 1928

@HarveySpecter ,

remove this margin !

oscprofessional_0-1631800303634.png

 

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
HarveySpecter
Tourist
10 0 1

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
Tourist
10 0 1

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
Tourist
10 0 1

Has anyone a solution for the Desktop View?