[Resolved] how to put my gold-line into my desktop view as well

Home Forums Support [Resolved] how to put my gold-line into my desktop view as well

Home Forums Support how to put my gold-line into my desktop view as well

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1595561
    Bruce Wayne

    here is my site in private information.
    i’ve to adding a hook into the site container.
    but it’s showing only on mobile. can you please help to check
    is there any thing we can do to put this gold-line into desktop view as well.

    thanks.

    #1596159
    Leo
    Staff
    Customer Support

    Hi there,

    I’m seeing a merged header element on the home page.

    Is that neccessary?

    If not can you remove it first?

    #1596202
    Bruce Wayne

    which one that you’ve mention please tell me

    #1596206
    Elvin
    Staff
    Customer Support

    Hi,

    The easiest approach to achieve what you’re trying to do would be to use the :after pseudo element in CSS:

    Try adding this:

    .header-wrap:after {
        content: "";
        background-image: url(https://biogaming.asia/wp-content/uploads/2020/11/b3efb816e6fa5b2a-e1604560083313.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        display: block;
        height: 2px;
    }

    Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

    And remove the gold line image block you’ve hooked in so there’s no duplicate display.

    Alternatively, you can keep the image you’ve hooked, but hook it to generate_after_header instead of what you’re currently hooking it into. (you seem to have hooked it on generate_inside_container)

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

    #1596229
    Bruce Wayne

    this is very nice , but as it showing every page here.
    can you optimizing it to show only in /blog
    and as it’s showing full page , can we shrink it contain with body content ?

    #1596234
    Elvin
    Staff
    Customer Support

    Try this instead:

    .gb-container-44ef72f1 {
        content: "";
        background-image: url(https://biogaming.asia/wp-content/uploads/2020/11/b3efb816e6fa5b2a-e1604560083313.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        display: block;
        height: 2px;
    }

    This follows the max-width of the container block you’ve placed as the navigation bar.

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

    #1596236
    Bruce Wayne

    this isn’t working

    #1596244
    Bruce Wayne

    what about if i need to put it for all page with max-width of the container block

    #1596318
    Elvin
    Staff
    Customer Support

    If you must follow the max-width of the container, this should do it:

    .header-wrap:after {
        content: "";
        background-image: url(https://biogaming.asia/wp-content/uploads/2020/11/b3efb816e6fa5b2a-e1604560083313.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        display: block;
        height: 2px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

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

    #1596336
    Bruce Wayne

    this working great , but again so sorry.
    i try to use in for all page but it’s looking not smooth for me
    can we try to use it only at /blog page ?

    Thanks so much

    #1596337
    Elvin
    Staff
    Customer Support

    To clarify: You want this to appear on the /blog page ONLY?

    If so, try this:

    body.blog .header-wrap:after {
        content: "";
        background-image: url(https://biogaming.asia/wp-content/uploads/2020/11/b3efb816e6fa5b2a-e1604560083313.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        display: block;
        height: 2px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    This CSS only applies if the page is the /blog page.

    As for it not looking smooth, can you explain a bit more? How is it not looking “smooth”?

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

    #1596341
    Bruce Wayne

    yes it’s good now

    then can we move all content at /blog page shift it below about 10px ?

    Thanks.

    #1596343
    Bruce Wayne

    because i need some space about 10-20 px between content and that gold-line like another page

    #1596346
    Elvin
    Staff
    Customer Support

    Add this:

    @media (min-width:769px){
    body.blog div.content-area {
        margin-top: 30px;
    }
    }

    Adjust the value to your preference. 🙂

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

    #1596348
    Bruce Wayne

    also another 2 question. (then we have 3 now)

    1.can we move all content at /blog page shift it below about 10px ?
    because i need some space about 10-20 px between content and that gold-line like another page.

    2.if you check at /blog page you will see a post is stick together there
    how to move it to have some space there because it’s too stick !

    3.at the homepage in the bottom , i’ve put a method to show a lastest post there.
    but it’s show only 100 words there per post. how to make it show about 300 words there?

    Thanks.

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