[Resolved] Site title border

[Ernesto]

Hi,
I need to set a border (1 o 2 px, white or another color) to the H1 header title on my site:
I just can’t figure out how to do it.

Thanks for your help

Ernesto

[Leo]

Hi there,

Try this CSS:

.main-title a {
    border: 1px solid #ffffff;
    padding: 5px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Ernesto]

I think I didn’t explain myself properly, I didn’t mean a rectangle box around the H1 tag, like this: http://prntscr.com/ojiyzq

but a border to each letter of the heading H1

————————————–
One more issue, opening the site with a tablet it looks like this: http://prntscr.com/ojj0gb
any hints to solve it?

Thanks once again

[Leo]

but a border to each letter of the heading H1

Not quite sure if I can picture this.

Can you provide a quick example?

Background images are tough to deal with sometimes unfortunately.

You can either try setting the background-size to auto, or apply a different image specifically for the smaller screen using this CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: url(https://IMAGE-URL);
    }
}

Let me know 🙂

[Ernesto]

I’m trying to achieve this:

http://prntscr.com/ojpm82

this is what I have now:

http://prntscr.com/ojpmlj

I would be nice to try something like this too, no fill in the font:

http://prntscr.com/ojpng6

thanks

[Leo]

Ahh you are looking for something like this:
https://css-tricks.com/adding-stroke-to-web-text/

Your CSS selector would be:

.main-title a, .main-title a:hover, .main-title a:visited {
    /* stoke CSS here */
}

[Ernesto]

YESSSSS !!! That’s the idea!

Thanks!

[Leo]

No problem 🙂

[Ernesto]

Leo,
Just one more question:
could this be like this?

.main-title a, .main-title a:hover, .main-title a:visited {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}

[Leo]

That looks good.

Have you tried it?

[Ernesto]

Yes Leo, and it works!
Thank you for the hints

Ernesto

[Leo]

No problem 🙂

[Author]

Posts