Mobile-Responsive Header Image

Here's what we're gonna cover in this video:

• Fix the top and bottom of the header from getting cut off.
• Make the header image mobile responsive by:
  • Creating a child theme
  • Copying the customizations from Make to our child theme
  • Adding CSS to child theme

Links:

http://responsivedesignchecker.com/

https://wordpress.org/plugins/one-click-child-theme/

Theme Customization Cloner

Code:

.site-header-main {
background-position: center !important;
background-size: 100% auto !important;
}

Steps:

1:40 – Getting the menu to display

2:50 – Header image getting cut off on the top and the bottom

5:15 – Looking at the site on mobile

6:24 – The solution to making our header image mobile-responsive

7:56 – Creating a child theme with the One Click Child theme plugin

10:45 – Theme Customization Cloner (to restore your formatting)

12:26 – Recap of all the steps

13:26 – Adding the CSS to the Make Child Theme.

Help me give the guys over at Theme Foundry some Twitter love!