How to make Page Header Mobile Friendly?

[Ravi Dixit]

I have created a header for my blog post, it is working good on Desktop.

But it is not mobile-friendly…

You can see here: https://prnt.sc/pd8y73

How can I make it mobile friendly?

[David]

Hi there,

instead of using the <font> and <center> tags:

1. You can set the horizontal alignment to center in the header element.
2. Use CSS to resize the Heading:

/* Desktop */
.page-hero h1 {
    font-size: 80px;
}
/* Mobile */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 40px;
    }
}

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

[Author]

Posts