Sridhar Katakam

Genesis and WordPress Tutorials

How to replace Front Page 1 background image with an inline image at smaller widths in Altitude Pro

by 1 Comment

Altitude Pro's Front Page 1 section uses a full screen background image on which the widget appears.

One problem with centered cover background images is that they will be cut off at left and right sides on smaller widths.

We can get around this by adding the background image inline in the HTML, hiding it on desktop widths, and at smaller widths - show the inline image and hide the background image.

Tested in Altitude Pro 1.1.3.

Step 1

In front-page.php change

genesis_widget_area( 'front-page-1', array(
    'before' => '<div id="front-page-1" class="front-page-1" tabindex="-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
    'after'  => '</div></div></div></div>',
) );

to

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • >