[Support request] Do not display Shortcode on Mobile

Home Forums Support [Support request] Do not display Shortcode on Mobile

Home Forums Support Do not display Shortcode on Mobile

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1609634
    Caitriona

    Hi, I am trying to hide my e-mail registration form on mobile and I am wondering what CSS I need to add to do this. This e-mail form actually comes from a plugin and I use shortcode to display it on my site.

    #1609733
    David
    Staff
    Customer Support

    Hi there,

    you can add this CSS:

    @media(max-width: 768px) {
        .snp-pop-inline {
            display: none;
        }
    }

    I noticed on your site that you have this in your Child Theme Style sheet:

    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
    }, 50 );

    That should go in your child theme functions.php NOT the style sheet.

    #1616267
    Caitriona

    Hi, thank you for noticing this error. I fixed it.

    I tried adding that as additional CSS but it still shows up on mobile. What do you think?

    #1616334
    Leo
    Staff
    Customer Support

    David’s CSS should work.

    Can you clear and disable your caching plugin first?

    #1616941
    Caitriona

    It’s still not working. I am not sure why. Actually I never disabled my cache plugin yet. It’s Litespeed cache but I don’t want to lose the settings on it.

    #1616950
    Caitriona

    I’ll look around and see if there is a setting that may be causing the problem

    #1617227
    David
    Staff
    Customer Support

    Try moving the CSS i provided to the very top of Additional CSS code.
    And temporarily disable the cache, and clear browser caches to see if its working.

    #1617237
    Caitriona

    I tried moving it to the top and it worked! Wow– weird hack! Thank you!

    #1617245
    David
    Staff
    Customer Support

    That generally means that there is some ‘broken’ CSS in there.
    Looks like you have a missing closing } on the very first @media query you have.

    Look for this CSS which is the very end of first media query and the start of the next – i have commented where the missing } should go:

    .wplogout-social-sharing {
      font-size: 17px;
      padding: 7px 20px;
    }
    } /* missing bracket goes here */
    
    @media only screen and (max-width: 600px) {
      .wplogout-social-sharing {
        font-size: 17px;
    #1617262
    Caitriona

    That’s perfect. Fixed. Thank you for all the help!!

    #1617276
    David
    Staff
    Customer Support
    #1658102
    Caitriona

    Hello, I just wanted to add another question. While this worked 100%, I added another email registration form in the right sidebar which I actually want to show up on mobile. How do I edit the CSS? Thank you for your help!

    #1658236
    Leo
    Staff
    Customer Support

    Can you link us to the page in question?

    #1658239
    Ying
    Staff
    Customer Support

    Hi ,

    You could modify the CSS to this:

    @media(max-width: 768px) {
        .snp-pop-inline:not(.snp-pop-715) {
            display: none;
        }
    }

    Let me know 🙂

    #1658643
    Caitriona

    Thank you! It works. Unfortunately, it doesn’t seem to be compatible on mobile at all. Might need to try something else.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.