[Support request] Design Help

[Praveen]

Hi guys,

Please excuse me if this request is out of scope. You guys have been so helpful in past, so thought of asking this.

I am designing the “header” of a website. I understand how to put an image at the background and then an overlay text.

But is there a possibility of putting the “text” in a box. I am putting the example of the header in the link below.

and the website I am trying to implement is also provided.

If possible please let me know!

Cheers!

[Praveen]

The white box is the box I am talking about. It sits above the image and below the text.

[Leo]

Hi there,

Just to confirm, you are trying to create this thing here?
https://www.screencast.com/t/hcdANJbDq

Are you trying to do this in the place of “Let’s Make The World a Better Place BUY CRUELTY-FREE. BUY VEGAN.”?

[Praveen]

Hi,

The way I am using header gives me an option to create something like this (attached in the link). But as you can see the text is not in a box here. I just need the text – the post title and any meta, into a white box which is not spanning across the full width (as you can see its limited.

[Elvin]

Hi,

You can try styling the current DOM structure with this.

.inside-page-hero.grid-container.grid-parent {
    padding: 30px;
    margin: 50px auto;
    max-width: 600px;
    background: white;
    color: black;
}

Alternatively, you can modify the Header’s markup by wrapping your text in a <div> and apply the background on that div wrapper.

Example:

<div class="page-hero-text-wrap">
    <h1 class="entry-title">....</h1>
    <div class="hero-meta>...</div>
</div>

And apply this CSS class to it:

.page-hero-text-wrap{
    padding: 30px;
    margin: 50px auto;
    max-width: 600px;
    background: white;
    color: black;
}

Here’s how either of the 2 would look like – https://share.getcloudapp.com/OAuJXgEZ

[Praveen]

Hi, Thanks. But with this the while box extends to the full width of the mobile. Thus, nothing is visible. Can we make the width of white bux as 60% for both mobile and desktop?

[Elvin]

Hi, Thanks. But with this the while box extends to the full width of the mobile. Thus, nothing is visible. Can we make the width of white bux as 60% for both mobile and desktop?

Sure thing.

Simply change the max-width: 600px; value to max-width: 60%; from the CSS code provided on the previous reply.

[Author]

Posts