Parallax Headings – Adjust color box size around copy headings

[bebold]

Hi,
Would love to adjust the “colored shadow box” behind Headings in the parallax sections. They are not sizing equally around content IE: pressed up against content on one side and larger margin on the other side. (See attached image)

It looks lopsided, plus, I’d like to control how big that spacing is.
Would also be great to be able to increase the size of area for content.

Thanks so much!
M

[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;
}

[Author]

Posts