- This topic has 12 replies, 3 voices, and was last updated 4 years, 6 months ago by Leo.
-
AuthorPosts
-
September 22, 2019 at 7:23 am #1015822Pauline
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
PaulineSeptember 22, 2019 at 7:27 am #1015827PaulineSorry – 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>September 22, 2019 at 7:30 am #1015836PaulineRe the code I just typed up, it’s a generatepress link & but the link did not appear when I typed it.
September 22, 2019 at 7:35 am #1015839PaulineI mean the <p>button text<p> code is not appearing – it’s the GP default button link π
September 22, 2019 at 8:32 am #1015965DavidStaffCustomer SupportHi 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.September 22, 2019 at 1:48 pm #1016135PaulineMany 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?September 22, 2019 at 2:43 pm #1016159DavidStaffCustomer SupportIf you go to Appearance > Simple CSS or Customizer > Simple CSS add the code there.
September 23, 2019 at 8:15 am #1016807PaulineHi 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
September 23, 2019 at 8:58 am #1016837DavidStaffCustomer SupportThis 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.September 24, 2019 at 5:14 am #1017478PaulineHi 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
September 24, 2019 at 6:47 am #1017546DavidStaffCustomer SupportCould you share a link to your site?
You can edit your original topic and use the Site URL field to share it privately.September 25, 2019 at 11:29 am #1018914PaulineOK – I gather you want me to start a new topic. I’ll go ahead and do just that. Thanks.
September 25, 2019 at 11:47 am #1018941LeoStaffCustomer Support -
AuthorPosts
- You must be logged in to reply to this topic.