Archived topic
Design Help
6 replies · Started by Praveen on November 9, 2020
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!
The white box is the box I am talking about. It sits above the image and below the text.
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."?
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.
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
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?
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.
