[Support request] Design Help

Home Forums Support [Support request] Design Help

Home Forums Support Design Help

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1524079
    prakshah

    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!

    #1524089
    prakshah

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

    #1524249
    Leo
    Staff
    Customer Support

    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.”?

    #1524648
    prakshah

    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.

    #1524688
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1527018
    prakshah

    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?

    #1527329
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

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