Hide WordPress Widgets in Mobile Device

As smart phone users increased web developers started to implement responsive designs for their website. Even same applicable to best CMS like wordpress.But actual problem starts it managing widgets in responsive design it leads to all widgets lined up at end of every page. Many people not like to have such things. So a simple css trick will help you out.

Step 1:

After login to wordpress site navigate to Apperance->Edit CSS

Step 2:

Add following CSS in it

/**
 * CodeZone.in
 * Author: Dineshkumar
 * Contact : hi@codezone.in
 */
 @media only screen and (max-width:480px) {
.hide_on_mobile {
display: none !important;}
}

Step 3:

Save changes

Step 4:

Install plugins either ZigWidgetClass or Widget CSS Classes. I suggest First one.

Step 5:

Navigate to Appearance ->Widgets

Step 6:

Click on widget want to hide out and input earlier declared class hide_on_mobile into the “CSS Classes” box at the top of the widget

Step 7:

Save Widget

Leave a Reply