In this tutorial, i’ll show you one flexible solution which enables you to add a image in the site tagline area of the Minimum Pro theme from StudioPress.
Here’s the forum question this post relates to:
I’m trying to put a custom photo above the site description. I placed one using simple hooks in the after header area and it looks perfect on mobile responsive sizes, but on the full size site the picture gets cropped so I only see the bottom half. I can’t figure out why it looks great on my iPad but chopped off on my computer.
Here’s the modified code from Lines 110 to 130 of the child themes functions.php file.
The above code simply pulls an image named banner.jpg from the child themes images folder.
And here’s the result:
You could then modify the CSS code on Line 495 of your child themes style.css file to change the background, remove/modify the padding and margins etc.
.site-tagline {
background-color: #000;
border-bottom: 1px solid #eee;
margin-top: 60px;
margin-top: 6rem;
padding: 40px 0;
padding: 4rem 0;
}And here’s one of many examples of how you can make your image in the tagline look after some simple tweaking of the CSS.
And here’s the mobile view without any modification of the tagline CSS or Media Queries.
I didn’t do anything with the site description however you could center it below the image and anywhere over the image.