• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Show Hide Different Widgets On Desktop & Mobile Screens

This tutorial provides the code which enables you to show the contents of a specific widget on desktop screens and hide the same widget content on mobiles while showing different widget content on mobiles.

Basically, you can use 1 widget for mobile content and another for desktops.

Mobile Screens
Mobile Screens
Desktop Screens
Desktop Screens

Demo Video #

Shows the content of the Custom HTML widget for desktops displaying on desktop screens only and the contents of the Custom HTML widget for mobiles displaying on mobile screens only.

Tested using the Altitude Pro child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

There’s 3 steps max :

# Step 1 : Create a new widget area using code like this at the end of your child themes functions.php file :

Should look something like this once you add the code to your functions file :

Step 1

Note : If you want to use this solution with an existing widget area, skip step 1.

# Step 2 : Copy & paste the following CSS to the end of your child themes style.css file and clear caching.

Register for full access

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems