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

Hi there,

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

Is that neccessary?

If not can you remove it first?

which one that you've mention please tell me

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)

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 ?

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.

this isn't working

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

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;
}

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

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"?

yes it's good now

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

Thanks.

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

Add this:

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

Adjust the value to your preference. :)

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.