Parallax Headings – Adjust color box size around copy headings

Support Forums for LiveMesh Themes & Plugins Forums Appdev Theme Support Parallax Headings – Adjust color box size around copy headings

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2462
    Beboldbebold
    Member

    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

    #2479
    Livemeshlivemesh
    Keymaster

    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;
    }
    
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Appdev Theme Support’ is closed to new topics and replies.