Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #916494

    Hello
    I have a site in development. On this page I’ve styled some special headers –
    http://azureatsouthgate.com/
    I want to be able to have an option to position the default special heading in the center of the page, but can’t get that to work. So, I’ve added in the special heading modern centered example but I want the bottom line to only be as wide as the text, just like the default examples. I’ve tried lost of css to target just the h2 etc but it’s not working so I think I’m not using the correct sytnax. Here’s some of my efforts, below.

    I’d like the modern centered example to have the same text width only border as the default, plus how do I target the sub heading, please?

    Thank you – I’ve looked at tons of posts but couldn’t get it working.

    .av-special-heading-tag {
    padding-bottom: 20px !important;
    border-bottom: #888a8d 1px solid !important;
    margin-bottom: 60px !important;
    }

    h2.av-special-heading-tag {

    }

    h3.av-special-heading-tag {
    float: right !important;
    }

    h2.av-special-heading.blockquote {
    border-bottom: #000 10px solid !important;
    }

    h2.av-special-heading.blockquote > * {
    border-bottom: #000 10px solid !important;
    }

    .modern-quote .av-special-heading-tag {
    padding-bottom: 20px !important;
    border-bottom: #ff3300 10px solid !important;
    }

    #917213

    Hey webWahine,
    To position the default special heading in the center of the page, try this css:

    .av-special-heading-h2.avia-builder-el-4 {
        float: none!important; 
       width: 50% !important;
       left: 28% !important; 
    }

    2018-02-24_131431

    Best regards,
    Mike

    #918641

    Ok, super! That worked nicely for the default special heading if you target the specific element, thank you!

    Also, part two of my question was –
    I’d also like the modern centered example to have the same text width only border as the default, plus how do I target the sub heading to style it, please?

    #918650

    Hi,

    Can you provide a screenshot of what you need fixed for the second part of your question? I’m having a bit of trouble understanding what you need.

    Best regards,
    Jordan Shannon

    #918656

    Here you go –

    http://azureatsouthgate.com/images/styling.jpg

    Thanks, Jordan! :)

    #918699

    Hi,

    That is actually a border added via css which won’t work as far as making it span just the width of the text. Perhaps use a horizontal rule instead and style accordingly.

    Best regards,
    Jordan Shannon

    #918749

    Ok, I wondered about that.
    I still need to know how to target the text to style subheading for modern centered with my own css, please :)

    #918753

    Hi,

    You need the style for the same text with the border?

    Best regards,
    Jordan Shannon

    #918756

    No, I’d like it to be a different colour, size, letter spacing etc.

    #919200

    Hi,

    Sorry for the miscommunication, but I mean which text exactly do you need modified?

    Best regards,
    Jordan Shannon

    #919214

    It’s ok, I figured it out – it’s this, thanks! :)

    .av-subheading_below p {
    /* put styles here */
    }

    #919219

    Hi,

    No problem at all. If you need additional help on other topics please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Style special heading modern’ is closed to new replies.