Archived topic
Popup ruins design - Positioning
7 replies · Started by Matthias on June 23, 2022
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.
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.
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.
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.
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)
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;
}works - thanks a lot
You're welcome
