Reply To: Parallax Headings – Adjust color box size around copy headings

[livemesh]

Can be done but will involve some extra work. What I have there is simple to achieve but has its problems as you said. To accomplish what you desire –

1) Change the content from

WordPress theme to present your fabulous Apps

to

WordPress theme topresent your fabulous Apps

Make where you want the line to break up a span each as shown above.

2) Pls insert the following CSS into Custom CSS tab in the Theme Options panel or the /custom/custom.css file (replace #home2-heading id with your custom one) –

#home2-heading .heading2 span { background: #DC4637;
background: rgba(220, 70, 55, 0.7);
display: inline-block;
margin: 5px; /* Change padding and margin to control spacing */
padding: 5px;
}

#home2-heading .heading2 h2 {
	font-size: 38px;
	line-height: 38px; /* Expecting spans to manage spacing between lines through margins, padding */
	background: none; /* Remove current background */
}

/* Small tablets */
@media only screen and (max-width: 767px)
#home2-heading .heading2 h2 {
font-size: 28px;
line-height: 28px;
}

/* iPhone - make sure it's all one line for each span */
@media only screen and (max-width: 479px)
#home2-heading .heading2 h2 {
font-size: 18px;
line-height: 18px;
}