Top bar popup help on mobile

  • Resolved bluetaildesigns

    (@bluetaildesigns)


    2 years ago

    Hi @timersys!

    I need your help, please. The CSS for a media query isn’t sticking for a top bar popup created.

    Currently it has: .spu-box.spu-position-top-bar .spu-content {display: inline-flex;}
    I’d like it to be {display: inline;} on mobile so the elements created (a header, text, button) center. Here’s what it looks like now https://snipboard.io/2MXcsz.jpg

    Any idea on how to get the elements to stack? Thank you! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Damian

    (@timersys)

    Hi, on wich url I can see the issue?

    Thread Starter bluetaildesigns

    (@bluetaildesigns)

    Hi Damian! Sorry, forgot the link: https://tatsukiswimming.com/
    (I didn’t build it, only help him with updates)
    Merci!

    Plugin Author Damian

    (@timersys)

    Try adding this to the custom CSS box of your popup

    @media all and (max-width: 568px){
    .spu-box.spu-position-bottom-bar .spu-content,
    .spu-box.spu-position-top-bar .spu-content {
        flex-flow: column;
    }
    .pop-up-text2{
        margin-bottom: 25px !important;
    }
}
    Thread Starter bluetaildesigns

    (@bluetaildesigns)

    Hi there,
    Thank you. I added the query and even added !important, but it’s still not displaying on the front end. Have also cleared the cache several times.

    Any other ideas? Thank you!

    Plugin Author Damian

    (@timersys)

    I see in the code:
    @media all and (max-width: 568){

    instead of

    @media all and (max-width: 568px){

    px is missing

    Thread Starter bluetaildesigns

    (@bluetaildesigns)

    Oops! Have been looking at it too long lol.
    THANK YOU! Working now ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Top bar popup help on mobile’ is closed to new replies.