Site title border

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 :)

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

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 :)

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

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 */
}

YESSSSS !!! That's the idea!

Thanks!

No problem :)

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

That looks good.

Have you tried it?

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

Ernesto

No problem :)