[Resolved] Elements – mobile view

Home Forums Support Elements – mobile view

  • This topic has 12 replies, 3 voices, and was last updated 12 months ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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
    Pauline

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

    #1015836
    Pauline

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

    #1015839
    Pauline

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

    #1015965
    David
    Staff
    Customer Support

    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.

    #1016135
    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?

    #1016159
    David
    Staff
    Customer Support

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

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

    #1016837
    David
    Staff
    Customer Support

    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.

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

    #1017546
    David
    Staff
    Customer Support

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

    #1018914
    Pauline

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

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