Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Support request] Issues regarding page headers

Home Forums Support Issues regarding page headers

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #394028
    risum

    Hi Generate pressers!

    Love your product! I hope anybody has some tips for these issues :O)

    1) I am using page headers and I have some issues. The same settings applied to pages, does not affect posts. Any idea what is wrong?

    See the difference

    A page with a page header:http://kropspotentialet.dk/saadan-hjaelper-jeg-dig/

    A post with a page header: http://kropspotentialet.dk/depression-angst-og-ptsd/

    I want the image to appear full width (within container) and no top padding

    2) I wanted to create a page header with a background image and have som text appear over it. I am missing options for controlling text – like layering or something. And the mobil view is all off. Background image does not scale.

    I had to create the text in photoshop as a workaround

    See: http://kropspotentialet.dk/

    Love from Denmark

    – Morten

    GeneratePress 1.4
    #394225
    Leo
    Staff
    Customer Support

    Hi there,

    1. Instead of inserting the image using HTML and if you are not adding any content to it, just simply add it in as Featured Image on the posts/pages: https://docs.generatepress.com/article/adding-featured-images/

    2. You’d have to use CSS and target the content. Background images are not responsive by nature so your current way actually work pretty good. Just try using featured image.

    Let me know if this helps.

    #395687
    risum

    Hi Leo

    Thanks for responding :o)

    1) Featured image in posts act the same way as the page header option. Creates a padding around it and not like when using featured image or page header on pages. This difference in posts and pages is just a design detail that anoys me, but have no actual importance other than it could have been cool to have the same look thoughout the website.

    2) Yes the photoshop option looks ok on a computer, but is useless on an ipad or a phone. And ofcourse the h1 text is not recognized by google, so I’ll be on the lookout for a solution somewhere ahead. Maybe using ccs and layers if I can get it to work and be responsive. My lack of skills are unfortunately a challenge ;o)

    #395896
    Leo
    Staff
    Customer Support

    1) Can you try setting the Single Post Header Location to Above Content Area in Layout > Page Header?

    2) You can switch out the background image and reduce the font size specifically for mobile if you’d like?
    Let me know if you’d like to go with this method 🙂

    #396340
    risum

    Hi Leo

    1) Ahhh there it was – need new glasses. Great thanks!

    2) Yes please, I would like to to with reduced font for mobile option 🙂 How do I bring that about?

    #396654
    Leo
    Staff
    Customer Support

    The code depends on what kind of fonts you are using.

    Can you link me to a page? Currently I only see pictures with texts already photo shopped on it.

    #397135
    risum

    Hi again

    1) I remember now. I had found the option regarding headers in single posts earlier. I dismissed it because left padding on the headline is gone.

    2) I have re-made a page header with html, background image and text. http://kropspotentialet.dk/ – body font is open sans and widget font is architects daughter (would be cool to use on page header as well) – both google fonts

    #397344
    Leo
    Staff
    Customer Support

    Something like this should do to change the text for mobile:

    @media (max-width: 768px) {
        .inside-page-header h1 {
            font-size: 10px;
        }
        .inside-page-header h3 {
            font-size: 8px;
        }
        .generate-content-header {
            background-image: url(http://URL-HERE);
        }
    }

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

    #397802
    risum

    You are so patient! :o) Thanks again.

    So where to put it? I tried in the user-css section. And on the page itself. It affects the text but not the image.

    #398135
    Leo
    Staff
    Customer Support

    Added another line in the code above which gives you the option to add the image specifically for mobile.

    #398326
    risum

    Great thanks 🙂 . I use the simple css plugin – It works fine. Now I would like to change the padding for mobile text and maybe add some more css. Where do I find the classes (naming) to target them correctly? I have searched through style.css for class-names

    I would also like to add some css to the footer menu I made. So it appears vertically and not default horizontally. It is more simple css I recon?

    #398564
    Leo
    Staff
    Customer Support

    I would recommend using inspect element/developer tool in your browser.

    Can you open a different topic for questions unrelated to the original topic?

    It would be easier for us and other users to search and re-use the answer in the future. Thanks!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.