Hide elements for mobile devices

[plauderton]

Hey everyone,
I want a Parallax block to appear on desktop and laptop screens and to disappear on phones and tablets. I realize I have to use a bootstrap in the “Extra class” field. So for the parallax I used .hidden-xs, and it’s hidden on phones. So far so good. But how can I combine it with the .hidden-sm, so that it is hidden on both phone and tablet? .hidden-xs-sm doesn’t work, .hidden-xs, .hidden-sm doesn’t either.

Furthermore I added a text box below the Parallax that has the same content as the Parallax, just without the photo. I want it to appear on mobile devices instead of the Parallax. Same issue here: How can I combine the .hidden-md and .hidden-lg code?

[Mohammad – SUPPORT]

Hi,
Just only insert this hidden-xs .hidden-sm at extra class input field. Hope it should work.
Thanks
Mohammad

[plauderton]

Geeez, so easy and I took hours and couldn’t figure it out. Thanks!
Can I shoot one more question? How can I arrange that when clicking in the top bar menu, the page doesn’t jump to the right section but rather scrolls elegantly like when clicking on the little sidebar? (page: plauderton.de)

[Mohammad – SUPPORT]

Hi,
Please add smooth-scroll-link class to all menus.
Thanks
Mohammad

[plauderton]

Hi,
I did, it doesn’t seem to work.

[Mohammad – SUPPORT]

Hi,
It should work. Please provide me wordpress admin login detail to check and resolve the issue.
Thanks
Mohammad

[plauderton]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom js at Admin -> Theme Options -> Custom JS.

<script>
jQuery('li.smooth-scroll-link a[href*=#]').on('click', function(event){     
    event.preventDefault();
  
			headerHeight = 0;
						
					if (jQuery('.sticky-header').length > 0) {
						headerHeight = jQuery('.sticky-header').height();
					}
					if (jQuery('#wpadminbar').length > 0) {
						headerHeight = headerHeight + 28;
					}
jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top - headerHeight - 1}, 500);
});
</script>

Thanks
Mohammad

[plauderton]

Sorry, that doesn’t work either.

[Mohammad – SUPPORT]

Hi,
Its working perfect. You inserted code at Custom CSS box instead of Custom JS.
Thanks
Mohammad

[plauderton]

Ohhh, right, I’m sorry. It is working now. Thanks a lot! 🙂

[Mohammad – SUPPORT]

Hi,
You most welcome.
Thanks
Mohammad