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
15830 2369 3072

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
HarveySpecter
Tourist
10 0 1

thank you for your efforts, but unfortunately nothing changes

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
15830 2369 3072

@HarveySpecter ,

remove this margin !

oscprofessional_0-1631800303634.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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?

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.