Goran theme – adjusting gray box behind page title

  • Unknown's avatar
    smdreller · Member ·

    Hello. This is the first time I’ve posted a forum question!

    I’ve been experimenting with a bit of CSS today to put a gray box behind all my page titles. The idea is to make the white page title font more contrast-y but still be able to see the feature images.

    Here’s what I’ve got:

    .hero .page-title {
    background-color: rgba(0,0,0,0.5);
    }

    This works well but now I’d like to adjust the width of the gray box so that it is proportional to the length of each page title. How do I do that?

    (I’d like it to automatically adjust, but I don’t have a lot of pages on this site so I’m willing to do it manually per page if necessary.)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, if I’m understanding you correctly, you want the page title boxes to adjust properly on smaller screens, is that correct? If so, change the “width” in the following CSS rule to “max-width” and it will stay at 400px in width until the viewport gets narrower than that and then it will start to shrink in width as needed. It should look like this. 

    .hero .page-title {
	background-color:rgba(0,0,0,0.5);
	max-width:400px;
}

    If, what you are wanting is for their to be the same space between the left and right ends of the text, no matter how much text there is in the title, then remove the above rule and replace it with these. 

    .hero .page-title {
	width:auto;
	display: inline;
}
.hero .hero-wrapper, .hero.with-featured-image {
	text-align: center;
}
@media screen and (max-width: 480px) {
	.hero .page-title {
		font-size: 1.5em;
	}
}
.hero .hero-wrapper {
	background-color:rgba(0,0,0,0.5);
	width: auto;
	display: inline-block;
	width: auto;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 400px
}

    I’ve also used a 480px media query to make the titles a bit smaller below 480px in width as “Architectural” was breaking within the word and the last letter was on the second line. See what you think and let me know.

  • The topic ‘Goran theme – adjusting gray box behind page title’ is closed to new replies.