Image Under Header

[taylorjkeen32]

Hello,

I'm using eleven40 theme and have an image for .image-after-header (replaced the Tagline section). I added code for margin-top: 65px because the photo was being cut off by the header. However, if viewed on a smaller screen (i.e. phone) there is a blank space between the header and the image (guessing due to the 65px). How do I get the image to always butt up to the bottom of the header no matter what screen size? Do I need to do something on the @media in the CSS? If so, how do I do this when the code is div and in Functions.php file?

Thanks in advance!

http://taylorjkeen.com

[Victor Font]

You shouldn't be adding the margin-top as inline css. You are using a class named image-after-header. Add the class to the style sheet and apply the margin there. Also add the class to the media queries so you can adjust the margin as needed.

.image-after-header {
    margin-top: 65px;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[taylorjkeen32]

Ok, this is what I have in my Theme Functions file:

//* Remove Tagline Area From Before Content Sidebar Wrap
remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_seo_site_description' );

//* Hook before content sidebar wrap widget area globally
add_action( 'genesis_after_header', 'wpsites_image_after_header' );

function wpsites_image_after_header() {
echo '<div class="image-after-header" style="margin-top: 65px;">';
echo '';
echo '</div>';
}

Is none of that supposed to be there? Just add it in the two spots you stated above?

[taylorjkeen32]

Ok, I got the code in the right places as you said above. However, it seems like putting it in the media queries section doesn't do anything. Anytime the full header/navigation shows the top part of image is under header But, when the header/navigation changes to the mobile responsive (drop down menu) the image appears correctly (butting up to bottom of menu).

[Author]

Posts