Archived topic
Page hero button - centering button in mobile view
3 replies · Started by Pauline on September 25, 2019
Viewing posts 1–4 of 4
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
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 :)
Thanks Leo - that worked a treat :-)
No problem :)
This archived topic is closed to new replies.
