[Resolved] Wrap H2 like this…

Home Forums Support [Resolved] Wrap H2 like this…

Home Forums Support Wrap H2 like this…

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1499181
    Sanu Kumar

    Hello
    Is it possible, can I wrap H2 like this: https://ibb.co/KVNL4pw
    H2 text should also be in the centre.

    #1499207
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1499245
    Sanu Kumar
    #1499367
    Sanu Kumar

    I didn’t get this, do I create Elements > Blocks and then add this two: h2-with-bg alignwide

    #1499550
    David
    Staff
    Customer Support

    What Elvin is proposing is you:

    1. Add the CSS he has provided.
    2. Edit the HTML for your heading in the Text editor – and write it like so:

    <h2 class="h2-with-bg alignwide">The h2 heading text</h2>

    Point 2 will be required for each H2 you want that style applied to.

    If you want to apply the style automatically to all H2’s in the single post content then you would need to do this:

    1. First remove any CSS you have already applied to your H2.
    2. Add this CSS:

    .single-post .entry-content h2 {
        padding: 10px 56px;
        background-color: blue;
        color: #fff;
        margin-left: -56px;
        margin-right: -56px;
    }
    
    @media(max-width: 768px) {
        .single-post .entry-content h2 {
            padding: 10px 20px;
            margin-left: -20px;
            margin-right: -20px;
        }
    }
    #1499643
    Sanu Kumar

    thanks David, it worked

    #1499649
    David
    Staff
    Customer Support

    You’re welcome

    #2105438
    Sanu Kumar

    I am using the below CSS for background color in H2.

    .single-post .entry-content h2 {
        padding: 10px 56px;
        background-color: blue;
        color: #fff;
        margin-left: -56px;
        margin-right: -56px;
    }
    
    @media(max-width: 768px) {
        .single-post .entry-content h2 {
            padding: 10px 20px;
            margin-left: -20px;
            margin-right: -20px;
        }
    }

    But, when we are putting H2 with any other plugin (WP Stackable), the background is coming due to this CSS. Like the below one:
    kyi

    I want to keep this effect with H2 entry content only, can you help me to exclude that?

    #2105492
    David
    Staff
    Customer Support

    In the CSS you will see this twice:

    .single-post .entry-content h2 {

    Change them to:

    .single-post .entry-content > h2 {

    That will apply only to H2s that are direct children of the entry-content container, not ones inside other containers

    #2105578
    Sanu Kumar

    worked

    #2106047
    David
    Staff
    Customer Support

    Glad to hear that

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.