Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 21, 2022 at 6:23 pm #1345385
    fkm

    Hey Enfold team,

    I’d like to make some styling changes to the cookie box on my website:
    – move the buttons to the left and reduce the space between them
    – reduce the space between the buttons and the text above
    – reduce the space between the buttons and the bottom border
    – reduce the width of the box

    Please see screenshot.

    I could make some changes myself by using and changing css codes I found on this topic in the community.
    Unfortunately, this didn´t work for all the desired changes.
    So please help.

    Thank you very much in advance.

    Best regards, fkm

    March 22, 2022 at 5:40 am #1345445
    Ismael

    Hey fkm,

    Thank you for the inquiry.

    You can use this css code to adjust the width of the consent bar.

    #top .avia-cookie-consent {
    width: 35%;
    min-width: 400px;
}

    And this one to pull the buttons slightly to the left and decrease the space between them.

    #top .avia-cookie-consent .avia-button {
    left: -30px;
    position: relative;
    padding-right: 5px;
    min-width: 70px;
}

    Best regards,
    Ismael

    March 22, 2022 at 6:08 pm #1345563
    fkm

    Hey Ismael,

    thank you very much – I could make all the change requests as descriped using your css codes.
    Great.

    Could you in addition please let me know how to enlarge the cookies box for mobile view (please see another screenshot).
    In the mobile view (smartphones) I reduced the margins to 16 px using the following css code:

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px!important;
    padding-right: 16px!important;
    }
    }

    Thanks a lot in advance.

    Best regards, fkm

    March 23, 2022 at 1:47 pm #1345670
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    @media only screen and (max-width: 479px) {
.responsive .avia-cookiemessage-top-left, .responsive .avia-cookiemessage-bottom-left {
    width: 91% !important;
    left: 16px !important;
    right: 16px !important;
}
.avia-cookiemessage-top-left {
    top: 16px;
}
}

    Best regards,
    Rikard

    March 25, 2022 at 2:19 pm #1346007
    fkm

    Hi Rikard,

    thank you very much for your quick reply and sorry for my late one.

    The CSS works well, it already looks great.
    The right border seems to be a bit wider than 16 Px (depending on the device), but I guess that’s technical and not that easy to fix, right?

    Please don’t take this as ungrateful on my part, I know it´s whining at a very high level – I´m deeply grateful (and unfortunately I´m also a hopeless perfectionist).

    Thanks a lot.

    Best regards, fkm

    March 27, 2022 at 5:58 pm #1346219
    Rikard

    Hi,

    Thanks for the update. Please try to adjust the width in the CSS:

    @media only screen and (max-width: 479px) {
.responsive .avia-cookiemessage-top-left, .responsive .avia-cookiemessage-bottom-left {
    width: 92% !important;
    left: 16px !important;
    right: 16px !important;
}
.avia-cookiemessage-top-left {
    top: 16px;
}
}

    Best regards,
    Rikard

    April 13, 2022 at 1:09 pm #1348236
    fkm

    Hi Rikard,

    thank you very much for your reply and please excuse my delay.

    I reconsidered the cookie box and now made it completely transparent so that the margins are lapsed.
    Now I´m happy with it, so you can close the topic.

    Thank you very much for your support, I really appreciate it.

    Best regards, fkm

    April 13, 2022 at 1:35 pm #1348245
    Rikard

    Hi,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Cookies Box Spacing’ is closed to new replies.