[Support request] Do not display Shortcode on Mobile

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Leo]

David’s CSS should work.

Can you clear and disable your caching plugin first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[Caitriona]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Caitriona]

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

[David]

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;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Caitriona]

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

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[Leo]

Can you link us to the page in question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ying]

Hi ,

You could modify the CSS to this:

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

Let me know 🙂

[Caitriona]

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

[Author]

Posts