[Resolved] Popup ruins design – Positioning

[Matthias]

Hi there,

so i am finally nearly done with designing or website – and now activated a cookie consent plugin (as our jurisprudence demands that).
Problem: there is no setting to change the position of that popup and it ruins the design i created with generatepress – escpecially in mobile view.
So my solution would be to reposition the plugin to the top – over the menu (but not the logo). Could you give me a little help how to do so? I tried to play around with the css already – but as i dont know css and am just guessin i couldnt get it to work so far.

Also (but thats a bonus) i would prefer the green button (accept)to be on the left, not the right – as the one i would like visitors to push in front makes more sense to me.

[Fernando]

Hi Matthias,

To have a better understanding of what you want to achieve, can you make a sketch of the ideal positioning of the “popup”.

Moreover, to clarify, are you referring to this?: https://share.getcloudapp.com/Koujd2KG

Kindly let us know.

[Matthias]

sorry that my description was lacking detail.
Attached a sketch – i want the current state – Box marked red no.1 to appear where the box marked 2 is – so it doesn’t block the slider (especially on mobile) for visitors first loading the page. Cookie notices.. – hope they will sooner or later not be necessary again.

[Fernando]

I see. Thank you for clarifying.

Here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

.dsdvo-cookie-notice.style1 div#tarteaucitronAlertBig {
    bottom: unset !important;
    top: 0;
}

.dsdvo-cookie-notice.style1 {
    bottom: unset;
}

.dsdvo-cookie-notice.style1 #tarteaucitronAlertBig #tarteaucitronAccept {
    float: unset;
}

This will put the cookie notice on top, and the green button to the left.

Kindly let us know how it goes.

[Matthias]

thx – that works nicely.

Can i ask a few follow up questions as (so far) i couldnt manage myself to achieve the following:
1.i changed the width – so it doesnt cover the logo. But i couldnt get it to align to the right
2.background color – i couldnt get it to be transparent

Extra – only if possible and not to much of a hassle
3. Can the red buttons be in one line in mobile view? (in mobile the buttons get quite big)

[David]

Hi there,

1 and 2 – update your CSS to include the margin-left and background properties:

.dsdvo-cookie-notice.style1 div#tarteaucitronAlertBig {
    bottom: unset !important;
    top: 0;
    right: 0;
    width: 60%;
    padding: 5px 15px;

    margin-left: auto;
    background-color: rgba(80, 89, 85, 0.9) !important;
}

[Matthias]

works – thanks a lot

[David]

You’re welcome

[Author]

Posts