[Resolved] Popup ruins design – Positioning

Home Forums Support [Resolved] Popup ruins design – Positioning

Home Forums Support Popup ruins design – Positioning

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2262917
    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.

    #2262932
    Fernando
    Customer Support

    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.

    #2262956
    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.

    #2262976
    Fernando
    Customer Support

    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.

    #2263036
    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)

    #2263115
    David
    Staff
    Customer Support

    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;
    }
    #2263221
    Matthias

    works – thanks a lot

    #2263946
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.