Genesis Tutorials

Using jQuery To Change Height At Any Screen Width

These jQuery code snippets enable you to control the height of a div or the height of a background image at any screen width.

The following video shows what the use of the code snippets on this page enable you to do :

In this example, the height is changed to 400px at screen widths less than 960px. Tested using the Atmosphere Pro child theme by StudioPress however should work fine using any Genesis child theme.

This solution will work with any existing jQuery including tutorials which use backstretch that adds inline CSS and tutorials which use pure CSS or a combination of both.

Tested by adding one of the following jQuery examples to the existing jQuery file in this tutorial for a registered user.

Register or login to access the jQuery snippets :

Related Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *