Custom CSS for Buttons not updating on Mobile responsive?

  • Resolved skydivider

    (@vineblog)


    2 years, 5 months ago

    First off, I am pretty bad at CSS coding so I apologize if I’m misunderstanding things here!

    Age Gate 2.x worked great for us, but the yes/no buttons in v3 don’t look good on our site with default styling.

    In particular the Yes/No buttons are cramped up right underneath the text and the default button colour doesn’t match our theme/site.

    Stealing some code from other posts here I have added this to Customizing > Additional CSS and it seems to have fixed the issue when I view our site in Chrome for Windows, and Chrome for iPadOS, but when I view on my an iPhone in Safari or Chrome, none of the customizations have propagated and the custom hover color is not honored nor the increased margin to give some space between the buttons and text?

    
button.age-gate-submit-yes,
button.age-gate-submit-no {
  border: 1px solid #fff;
  background: #000;
  padding: 5px 5px;
  font-size: 15px;
  margin: 15px 15px 0;
  font-family: 'Open Sans';
  -webkit-appearance: none;
  border-radius: 1;
  min-width: 55px;
}
:root {
 --ag-button-color-hover: #b38808;
 --ag-button-color-text-hover: #fff;
}

    sample screen of the button issue on mobile device (iphone 13, iOS 16.0)

    View post on imgur.com

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Phil

    (@philsbury)

    Hi @vineblog,

    It looks like your CSS is inside a media query:

    @media only screen and (min-width: 1001px)

    So it’s only being applied when the screen size is bigger than 1001px.

    The majority of the could be replace with variables though to make things easier, you can still change those inside a media query if you wanted to, but this should be everything you need:

    These should match the cookie buttons:

    
/* Still need a couple of selectors, border should be a variable, but isn't right now */
button.age-gate-submit-yes,
button.age-gate-submit-no {
    border: 1px solid #fff;
    min-width: 55px;
    -webkit-appearance: none;
    font-family: 'Open Sans';
}

/* Then everything else should be achievable via variables: */
:root {
    --ag-button-color-background: rgb(179, 136, 8);
    --ag-button-color-text: rgb(51, 51, 51);
    --ag-button-size: 15px;
    --ag-button-radius: 5px;
    --ag-button-padding: 10px;
    --ag-button-color-hover: #000;
}

    I’m going to get these settings in the admin as soon as I can!

    One other thing I noticed is on mobile I can’t click the cookie banner. THis is going to be the age gate focus trap, two options to fix, either turn off the focus trap in the age gate advanced settings, or you can add element to it with the age_gate/trap_focus/elements filter. The first one is probably easier, mostly as I’ve not had chane to properly document the other one yet.

    Thanks
    Phil

    Thread Starter skydivider

    (@vineblog)

    Thanks, @philsbury ! Missing the media query wrapper would be the, “I’m terrible at CSS” thing! Thanks for pointing that out. I just fixed the wrapper tags so age gate code was not inside the wrapper and everything looks fine now.

    Plugin Author Phil

    (@philsbury)

    I think terrible is selling yourself short @vineblog!

    Glad its working now though!

    Thanks
    Phil

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom CSS for Buttons not updating on Mobile responsive?’ is closed to new replies.