Styling margins and text size for mobile

  • Resolved Torchy

    (@torkild)


    10 months, 3 weeks ago

    I notice that ‘#shadow-root’ is used for this.

    Is it possible to change the styling of this more extensively than what is offered in the back end?
    E.g. for mobile devices, it would be good if the layout could be altered and the consent box could be made smaller.
    For users with smaller mobiles, it would be helpful as the box is taking over 50% of the screen.
    And using #shadow-root override is not supported by IOS.

    Regards

    • This topic was modified 10 months, 3 weeks ago by Torchy.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Mircea Sandu

    (@gripgrip)

    10 months, 3 weeks ago

    Hi @torkild,

    Yes, we used shadow root to make the banner work predictably on any theme/website.

    We added “part” attributes to most elements that can be used to add custom styling for our banner. Not everything can be changed using the part attributes but it should give you some options here.

    More info on how that works can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/::part

    For example, if you would like to make the buttons show up on the same row on mobile to take up less vertical space you can use:

    ::part(wpconsent-banner-footer) {
    flex-flow: row;
}

    Let me know if I can provide more info on this.

    • This reply was modified 10 months, 3 weeks ago by Mircea Sandu. Reason: fix link
    Thread Starter Torchy

    (@torkild)

    10 months, 2 weeks ago

    Hi Mircea,
    Apologies for my late reply.
    Thanks for the snippet, just what was needed. Worked great!

    Kind Regards
    Torkild

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

The topic ‘Styling margins and text size for mobile’ is closed to new replies.