Elements - mobile view

Sorry - the correct code is:

<h1 style="font-size:50px;">How to make a hero header in GeneratePress</h1>
<p style="font-size:24px;">How the heck did I make this header for my tutorial?</p>
<p>Button text</p>

Re the code I just typed up, it's a generatepress link & but the link did not appear when I typed it.

I mean the <p>button text<p> code is not appearing - it's the GP default button link :-)

Hi there,

when adding HTML or CSS or any code in the forum, before submitting highlight the code and click the Code button. This will preserve the code.

If you can share a link to the site i can advise what the issue is.

I would advise against adding inline styles. Instead you can use some CSS eg.

/* Desktop Hero Typography */
.page-hero h1 {
    font-size: 50px;
}
.page-hero p {
    font-size: 24px;
}

/* Mobile Hero Typography */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 40px;
    }
    .page-hero p {
        font-size: 18px;
    }
}

the page-hero class exists on all header elements so this will style the H1 and P tags within the element.

Many thanks for this David.
Please could you tell me where to put this CSS - would it be in the Simple CSS section (I have downloaded the plugin), or the Elements section?

If you go to Appearance > Simple CSS or Customizer > Simple CSS add the code there.

Hi David

Thanks - I put all that in Simple CSS and it worked.
Would you mind at all to show me where and how in the above CSS to style the button? If you could write it in (just an example), that would be great.
The code I have put in the Element is:

<h1 style="font-size:50px;">How to make a hero header in GeneratePress</h1>
<p style="font-size:24px;">How the heck did I make this header for my tutorial?</p>
<p> <button type="button">Click Me!</button> </p>

Best wishes - Pauline

This article may be worth reading:
https://docs.generatepress.com/article/adding-buttons/

You can then create as many button styles you need :)
Let us know if you need more help.

Hi David

I've been trying for ages to centre the following button on mobile view, but can't seem to do it. Can you advise me how to do it?

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

Thanksyou :-) - Pauline

Could you share a link to your site?
You can edit your original topic and use the Site URL field to share it privately.

OK - I gather you want me to start a new topic. I'll go ahead and do just that. Thanks.

Just answered :)
https://generatepress.com/forums/topic/page-hero-button-centering-button-in-mobile-view/#post-1018939