Archived topic
Do not display Shortcode on Mobile
15 replies · Started by Caitriona on January 7, 2021
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.
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.
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?
David's CSS should work.
Can you clear and disable your caching plugin first?
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.
I'll look around and see if there is a setting that may be causing the problem
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.
I tried moving it to the top and it worked! Wow-- weird hack! Thank you!
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;
That's perfect. Fixed. Thank you for all the help!!
Glad to be of help!
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!
Can you link us to the page in question?
Hi ,
You could modify the CSS to this:
@media(max-width: 768px) {
.snp-pop-inline:not(.snp-pop-715) {
display: none;
}
}
Let me know :)
Thank you! It works. Unfortunately, it doesn't seem to be compatible on mobile at all. Might need to try something else.