Adjusting consent button size

  • Resolved msf2000

    (@msf2000)


    2 years, 10 months ago

    Hi,

    Thx for a great plugin!!

    I’m trying to adjust the size of the consent button, but just can’t make it work. Have tried with padding and borders etc. but I can’t make an impact on the size. I can change a lot of other stuff, radius etc.

    Please bear with me, I have limited CSS background. This is my CSS so far:

    .cmplz-manage-consent {
    font-family: mulish !important;
    right: 7px !important;
    font-size: 12px !important;
    font-weight: Bold !important;
    color: white !important;
    background: #113049 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
   }

    Any help appreciated greatly 🙂

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Contributor Jarno Vos

    (@jarnovos)

    2 years, 10 months ago

    Hi @msf2000,

    You could make the button larger by adding some additional padding to both the left and right side of the button.

    #cmplz-manage-consent .cmplz-manage-consent {
    padding-right: 40px;
    padding-left: 40px;
}

    Kind regards, Jarno

    Thread Starter msf2000

    (@msf2000)

    2 years, 10 months ago

    Hi @jarnovos,

    Sorry, I meant how to make the padding smaller. Or maybe it’s the margins. I don’t know. For same reason I can’t make the consent button smaller, only bigger 🙂

    I would like to reduce the height of the button and ofc. still have the “COOKIES” text in the middle.

    Plugin Contributor Jarno Vos

    (@jarnovos)

    2 years, 10 months ago

    Hi @msf2000,

    Sure! The below CSS reduces the height, and slightly adjusts the line-height of the button text; to keep it nicely aligned in the center.

    #cmplz-manage-consent button.cmplz-manage-consent {
    height: 30px;
    line-height: 1px;
}

    Kind regards, Jarno

    Thread Starter msf2000

    (@msf2000)

    2 years, 10 months ago

    Thx @jarnovos, it works excellent. One last thing, on mobile I would like to reduce the width of the consent button. I’m ofc. trying with @media screen and (max-width: 769px) but I can’t find a way to reduce the width?

    Plugin Contributor Jarno Vos

    (@jarnovos)

    2 years, 10 months ago

    Hi @msf2000,

    Great to hear, as for your other request; you could do something like the below to change the button’s width specifically in case of these devices.

    I’ve set the width to the smallest value I could find, whilst also ensuring that the text fits properly within the button:

    @media screen and (max-width: 769px) {
    #cmplz-manage-consent button.cmplz-manage-consent {
        min-width: 60px;
        width: 60px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

    Kind regards, Jarno

    Thread Starter msf2000

    (@msf2000)

    2 years, 10 months ago

    Once again, thx @jarnovos! 🙂

    Plugin Contributor Jarno Vos

    (@jarnovos)

    2 years, 10 months ago

    Hi @msf2000,

    Of course, not a problem at all.

    If you’re happy with the plugin and our support, it would be really great if you could consider casting a review about the plugin here:

    https://ww.wp.xz.cn/support/plugin/complianz-gdpr/reviews/#new-post

    Kind regards, Jarno

    Thread Starter msf2000

    (@msf2000)

    2 years, 10 months ago

    Done 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Adjusting consent button size’ is closed to new replies.