[Resolved] Page hero button – centering button in mobile view

[Pauline]

Hi

I’ve used the following code example from GP to make a button. Please could you advise me how to centre the button in mobile view:

IN SIMPLE CSS I HAVE PUT:

/* Mobile Hero Typography */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 24px;
        text-align: center;
    }
    .page-hero p {
        font-size: 14px;
        text-align: center;
    }

.button.sun-flower,
.button.sun-flower:visited {
	background: #F1C40F;
	color:#FFF;
        font-size: 18px;
}

.button.sun-flower:hover,
.button.sun-flower:active {
	background: #E2B607;
	color:#FFF;
}

IN ELEMENTS I HAVE PUT:

<h1>How to make a hero header in GeneratePress</h1>
<p>How the heck did I make this header for my tutorial?</p>
<a class="button sun-flower" href="URL FOR YOUR BUTTON">Your button text</a>

Thankyou!
Pauline

[Leo]

Hi there,

If you want the entire page hero content to center on mobile, try this CSS:

@media (max-width: 768px) {
    .inside-page-hero {
        text-align: center;
    }
}

Let me know 🙂

[Pauline]

Thanks Leo – that worked a treat 🙂

[Leo]

No problem 🙂

[Author]

Posts