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

[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.

[Leo]

Hi there,

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

Is that neccessary?

If not can you remove it first?

[Bruce Wayne]

which one that you’ve mention please tell me

[Elvin]

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)

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

[Elvin]

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.

[Bruce Wayne]

this isn’t working

[Bruce Wayne]

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

[Elvin]

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

[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

[Elvin]

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

[Bruce Wayne]

yes it’s good now

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

Thanks.

[Bruce Wayne]

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

[Elvin]

Add this:

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

Adjust the value to your preference. 🙂

[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.

[Author]

Posts