- This topic has 12 replies, 3 voices, and was last updated 3 years, 4 months ago by
Leo.
-
AuthorPosts
-
September 22, 2019 at 7:23 am #1015822
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
PaulineSeptember 22, 2019 at 7:27 am #1015827Pauline
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>September 22, 2019 at 7:30 am #1015836Pauline
Re 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 #1015839Pauline
I mean the <p>button text<p> code is not appearing – it’s the GP default button link π
September 22, 2019 at 8:32 am #1015965David
StaffCustomer 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 22, 2019 at 1:48 pm #1016135Pauline
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?September 22, 2019 at 2:43 pm #1016159David
StaffCustomer SupportIf 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/September 23, 2019 at 8:15 am #1016807Pauline
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
September 23, 2019 at 8:58 am #1016837David
StaffCustomer 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 24, 2019 at 5:14 am #1017478Pauline
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
September 24, 2019 at 6:47 am #1017546David
StaffCustomer SupportCould 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/September 25, 2019 at 11:29 am #1018914Pauline
OK – 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 #1018941Leo
StaffCustomer SupportJust answered π
https://generatepress.com/forums/topic/page-hero-button-centering-button-in-mobile-view/#post-1018939Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.