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

Home Forums Support Page hero button – centering button in mobile view

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1018918
    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

    #1018939
    Leo
    Staff
    Customer Support

    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 🙂

    #1019870
    Pauline

    Thanks Leo – that worked a treat 🙂

    #1019876
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.