[wp-trac] [WordPress Trac] #38995: Twenty Seventeen: Custom headers incorrect on mobile when no image is set.

[WordPress Trac]

#38995: Twenty Seventeen: Custom headers incorrect on mobile when no image is set.
---------------------------+------------------------
 Reporter:  joemcgill      |       Owner:  joemcgill
     Type:  defect (bug)   |      Status:  accepted
 Priority:  normal         |   Milestone:  4.7
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:  has-patch      |     Focuses:
---------------------------+------------------------

Comment (by Anariel Design):

 Hey,

 thanks for opening this ticket, I noticed the bug yesterday when I was
 working on a new theme where I added this feature. What I used to resolve
 this one ( it took some time ;) ), left everything like it was in Twenty
 Seventeen and added a class when header image is empty for the .custom-
 header-image div like this:

 {{{
 <div class="custom-header-image <?php echo esc_attr(
 liber_additional_class() ); ?>">
         <?php the_custom_header_markup(); ?>
 </div>
 }}}

 than I added inside the extras.php file this:

 {{{
 function liber_additional_class() {

         if ( empty(has_header_image()) ) {
                 $additional_class = 'has-header-image';
         }

         return esc_attr( $additional_class );
 }
 }}}

 and line of CSS:

 {{{
 @media only screen and (max-width: 900px)  {
         .custom-header-image.has-header-image {
                 height: auto;
         }
 }
 }}}

 This way I change the height just for the smaller screens by adding extra
 class to the .custom-header-image when header image is empty.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38995#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform