Elements – mobile view

[Pauline]

Hello there!

I am a beginner trying out “Elemments”.

I have a page hero on the front page, with H1 and <p> text and button all on top of an image. I used the following code that I got from an online tutorial, which I have put in “Elements” under an “Element Type” of “Header”:

<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>

I have set the padding for desktop at 100px right, and 100px left, and on mobile 10px right and 10px left.

It looks fine on desktop view – both the H1, the <p> text and button are all left aligned.

However, when I view it on moblie, only the H1 has padding, whilst the <p> text and button are aligned at the edge of the left side of the screen (no padding).

Please let me know where and how to adust the <p> text and button. If you could give me some examples that would be great.

Many thanks
Pauline

[Pauline]

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>

[Pauline]

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

[Pauline]

I mean the <p>button text<p> code is not appearing – it’s the GP default button link 🙂

[David]

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.

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

[Pauline]

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?

[David]

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

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

[Pauline]

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

[David]

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.

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

[Pauline]

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

[David]

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

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

[Pauline]

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

[Leo]

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

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

[Author]

Posts