Header Custom Content: How to align center with responsive

  • Resolved jdaniel

    (@jdaniel)


    9 years, 1 month ago

    Another question:

    I use “Header Custom Content” to add a custom page title (in h1 and h2-style for subpages). I want the title to be horizontally centered at the bottom of the header image, overlapping a bit. But the problem is how I can make it always stay in the center when having a smaller screen size?

    I used this css:

    .gch-header-content-frontpage h1 {
                text-align: center;
                background: #83B941;
                color: #fff;
                width: 395px;
                text-transform: uppercase;
                line-height: 3.9;
                margin: -134px 301px 42px 301px;
                z-index: 100;
                position: relative;
                font-size: 18px;
                font-size: 1.8rem;
                font-family: 'Titillium Web', sans-serif;
}

    But I think the (negative) margin-solution is not working. (I also want a background color so it looks like a box.)

    https://www.ads-software.com/plugins/genesis-custom-headers/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter jdaniel

    (@jdaniel)

    I tried it differently, but not it’s not centered anymore:

    .gch-header-content h1 {
    text-align: center;
    background: #83B941;
    color: #fff;
    /* width: 395px; */
    text-transform: uppercase;
    line-height: 3.9;
    margin: -34px 0 auto;
    /* z-index: 0; */
    position: relative;
    font-size: 18px;
    font-size: 1.8rem;
    font-family: 'Titillium Web', sans-serif;
    padding: 0 30px;
    display: inline-block;
}
    Thread Starter jdaniel

    (@jdaniel)

    With this combination it works:

    .gch-header-content h1 {
    text-align: center;
    background: #83B941;
    color: #fff;
    text-transform: uppercase;
    line-height: 3.9;
    margin: -34px 0 auto;
    position: relative;
    font-size: 18px;
    font-size: 1.8rem;
    font-family: ‘Titillium Web’, sans-serif;
    padding: 0 50px;
    display: inline-block;
    }

    and

    .gch-header-image, .gch-header-inner, .gch-header, .gch-header-image-inner {
    text-align: center;
    }

    But now I cannot use the whole negative margin for rearranging it vertically (move it higher so that it overlaps with the header image above) (only up to -22px).

    Plugin Author Nick Diego

    (@ndiego)

    Hi jdaniel, is there anyway you can provide a link or at least screenshot of what you are trying to accomplish. I am having a hard time visualizing this. I am sure this can be resolved with the correct CSS, I am just not sure how to approach the issue without seeing what you have so far in action.

    Thread Starter jdaniel

    (@jdaniel)

    If I don’t forget I’ll show you in a couple of days what I mean. I think I solved it myself.

    Sorry for the confusion.

    Plugin Author Nick Diego

    (@ndiego)

    Hi jdaniel,

    I am going to mark this as resolved, but if you need more help, feel free to post a new question.

    Thanks,
    Nick

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header Custom Content: How to align center with responsive’ is closed to new replies.