Page Template Widget Disappeared

[LeaChristine]

Hi all- so I've created a widget for a site that I'm working on, and I need to have it display only on the home/landing page, and only on mobile-sized screens. I had the widget up and working, but for some reason it has disappeared? I haven't changed any of the coding for it, so I'm not sure what happened... Here is the code I have for my functions.php:

<?php
//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );

//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', 'Genesis Sample Theme' );
define( 'CHILD_THEME_URL', 'http://www.studiopress.com/' );
define( 'CHILD_THEME_VERSION', '2.1.2' );

//* Enqueue Google Fonts
add_action( 'wp_enqueue_scripts', 'genesis_sample_google_fonts' );
function genesis_sample_google_fonts() {

	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:300,400,700', array(), CHILD_THEME_VERSION );

}

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

//* Add support for custom background
add_theme_support( 'custom-background' );

//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );

//* Add function for header image
function sample_header_image() {
    ?>
    <div class="header-image">
        <a href="http://www.sample.leachristinedesigns.com/"><img src="http://sample.leachristinedesigns.com/wp-content/uploads/2015/06/Logo-BLACK-cropped.png" /></a>
    </div>
    <?php
	
}
add_action( 'genesis_header', 'sample_header_image' );

//* Register widget for HOURS
genesis_register_sidebar( array(
	'id'          => 'hours',
	'name'        => __( 'Hours' ),
	'description' => __( 'This is the area where hours are displayed' ),
) );

//* Hook social widget area in header
add_action( 'genesis_header', 'hours', 4);
function hours() {
 
	genesis_widget_area( 'hours', array(
		'before' => '<div class="hours">',
		'after'  => '</div>',
	) );
 
}

//* Register widget for ADDRESS
genesis_register_sidebar( array(
	'id'          => 'address',
	'name'        => __( 'Address' ),
	'description' => __( 'This is the area where address, phone, and social are displayed' ),
) );

//* Hook social widget area in header
add_action( 'genesis_header', 'address', 4);
function address() {
 
	genesis_widget_area( 'address', array(
		'before' => '<div class="address">',
		'after'  => '</div>',
	) );
 
}

//* Register widget for MOBILE CONTACT WIDGET
genesis_register_sidebar( array(
	'id'          => 'mobile-widget',
	'name'        => __( 'Mobile Widget' ),
	'description' => __( 'This is the area where phone and map links are displayed on mobile screen sizes' ),
) );

//* Hook social widget area in header
add_action( 'genesis_header', 'mobilewidget');
function mobilewidget() {

// If it's the Landing page, display slider

if ( is_front_page() && is_home() ) {
 
	genesis_widget_area( 'mobile-widget', array(
		'before' => '<div class="mobile-widget">',
		'after'  => '</div>',
	) );
 
}

}

//* Register widget for SLIDER
genesis_register_sidebar( array(
	'id'          => 'slider',
	'name'        => __( 'Slider Area' ),
	'description' => __( 'This is the area where the slider is displayed' ),
) );

//* Hook social widget area in header
add_action( 'genesis_before_content', 'slider');
function slider() {

// If it's the About page, display slider

if (is_page( 'about' ) ) {
 
	genesis_widget_area( 'slider', array(
		'before' => '<div class="slider">',
		'after'  => '</div>',
	) );
 
}

}

The HTML I have in the widget itself is:

<div class="mobile-call">
<a href="tel:585-222-2222"><img src="http://sample.leachristinedesigns.com/wp-content/uploads/2015/07/CALL.png" width="90px"></a>
</div>

<div class="mobile-find">
<a href="https://goo.gl/maps/RhqEe"><img src="http://sample.leachristinedesigns.com/wp-content/uploads/2015/07/FIND.png" width="90px"></a>
</div>

And then here is the css I have in order to display the widget only on mobile screen-size:

/* # Hide Mobile Widget
----------------------------------------- */

.mobile-widget {
display: none;
}

@media only screen and (max-width: 450px) {

/* # Mobile Widget
----------------------------------------- */

.mobile-widget {
display: inline-block !important;
padding-top: 20px;
width: 100%;
}

.mobile-call {
float: left;
padding-left: 20px;
}

.mobile-find {
float: right;
padding-right: 20px;
}
}

http://sample.leachristinedesigns.com/

[LeaChristine]

I figured it out, thanks.

[Author]

Posts