[Support request] How do you make the a div left aligned and responsive in the header content?

[sdanbu]

I’m trying to make the header content have a box with a background that is left aligned AND responsive in the header content.

I can create the box but it does not have a percentage of the page and often drags into the rest of the page. Instead, it should just be one percentage of the page and not leave the header content area.

I also am having trouble making it begin further down the page…
I can kind of do this with a rich text editor but GP doesn’t have that for the header-content.

<p>
<p>
<p>

<font size=30>Welcome!</font>
<span style=”color: #ffffff;”>Info info info info </span>

Can you help me with this?

[Leo]

Hi Scott,

I can’t quite picture what you are wanting to do.

Are you able to provide a quick example or show me what you have so far?

Depending on what you are after, might be able to use the before header content hook:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

Keep in mind that background image property is not responsive by nature.

Let me know 🙂

[sdanbu]

Thanks I’m basically trying to make the text responsive

It would also be great would have a background color that could be responsive.

[Tom]

Can you show me what you have vs what you’re trying to do? I’m having trouble picturing it.

[sdanbu]

For some reason, the div in header content is centered in the page.

See http://tinypic.com/r/k30gh5/9

Instead, it should have a position to the left of where it is currently.

I don’t understand why the text is in the middle of the page when I didn’t do anything to the CSS. It’s like it has a huge margin built in.

[Tom]

What’s the URL to the page?

[sdanbu]

I’m trying to make the relative position left aligned starting at around 10% of the screen
or absolute position at left side of the screen or something where it is not as much in the center

Or if the container in the header is a certain size maybe it can be set to be more full screen?

[Tom]

You would have to apply it to the entire container:

.generate-combined-content.grid-container {
    max-width: 80%;
}

[Author]

Posts