Hide Section on Desktop – Mobile

I have seen a lot of questions related to hiding/showing a section on desktop and mobile. 

Most of us will target data-section-id and use display: none code.

If you need to hide many sections, you will need to target many ids, and sometimes cause inconvenience to your clients.

This tip will demonstrate another way to hide a section on desktop or mobile. 

#1. First, add this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.hide-on-desktop').closest('section.page-section').addClass('hide-on-desktop');
      $('.hide-on-mobile').closest('section.page-section').addClass('hide-on-mobile');
});
</script>

#2. Add this code to Custom CSS

@media screen and (min-width:768px) {
 section.hide-on-desktop {
     display: none !important;
   }}
 @media screen and (max-width:767px) {
 section.hide-on-mobile{
     display: none !important;
   }
 }

Hide Section5 Min

#3. Edit Section where you want to hide on Desktop or hide on Mobile and add a Code Block 

Add Block1 Min

Then use corresponding code, if you want to hide section on Desktop

<div class="hide-on-desktop"></div>

Hide Section02 Min

OR this code, if you want to hide section on Mobile

<div class="hide-on-mobile"></div>

 

Hide Section03 Min

#4. If you want to hide Gallery Section (Image Section), add this code to Caption box

<span class="hide-on-desktop"></span>

Do similar if you want to hide on mobile

<span class="hide-on-mobile"></span>

Hide Section04 Min

and make sure caption is enabled

Gallery Caption1 Min