Archived topic
query about transbox on header (padding/alignment)
3 replies · Started by Elisabeth on March 24, 2021
Hello
I've been trying to get a header element showing up right and keep hitting snags. I've read through all the documentation and seem to be missing a crucial thing.
Non-home pages: for pages other than home I have a banner image using the featured image, which I'm overlaying with the page title using short code in the element. I'm sticking that inside a transbox with some extra css added in the customizer.
Problem 1: I want the transbox to change size and fit around the letters of each h1 title but it's a fixed width and I can't work out which bit of code or which setting to change to alter that. I want the picture behind the transbox to be clear and sharp and not zoomed in/blown up, and I want it always to be the same height on all pages.
Thank you!
Liz
Hi there,
in your transbox CSS add an display: inline-block; property - see below:
div.transbox {
background-color: #003671;
border-radius: 10px;
opacity: 0.8;
padding-bottom: 1px;
padding-top: 5px;
padding-right: 20px;
padding-left: 20px;
min-width: 100px;
text-align: center;
display: inline-block; /* Add me */
}Thank you - perfect.
You're welcome
