[Support request] Page header view on mobile

Home Forums Support [Support request] Page header view on mobile

Home Forums Support Page header view on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #567964
    Aaron

    I just tried using a page header merged and it looks great on desktop and even on mobile when horizontal. However with vertical viewing the image does not fully show how could I fix this? The link is posted in website URL

    #568038
    David
    Staff
    Customer Support

    Background images are set to cover, so due to the difference in device aspect ratio the images will not never be the same between desktop and portrait mobile. You can try reducing the vertical padding on the content container with this CSS:

    @media (max-width: 768px) {
        .page-header-content-container {
            padding-top: 50px;
            padding-bottom: 50px;        
        }
    }

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

    #568107
    Aaron

    I tried using that CSS it didn’t change the view it remained the same.

    #568110
    David
    Staff
    Customer Support

    Sorry i don’t have access to the URL. I can only assume that the padding is the same (or similar) in the page header settings. And the size of the container is being defined by its content (?). If so you try reducing the size of the content for mobile?

    #568237
    Aaron

    Here’s the link URL

    #568248
    David
    Staff
    Customer Support

    OK you can try this:

    @media (max-width: 768px) {
        .generate-combined-page-header {
            height: 300px !important;
        }
    }

    If you want it to only apply to that page header then use this selector #page-header-19.generate-combined-page-header

    I do have a concern that using an image with text included, is that the text may become unreadable when scaled to fit the smaller screens. Recommendation would be to use a photo for the background and then set the text in the Page header content area, the background image may get cut off but the text will flow to fit.

    #568392
    Aaron

    So I used that css and it worked so now it looks good on a phone however how could I make it so I could do the same for a tablet?

    #568400
    David
    Staff
    Customer Support

    Replace the code above with this:

    @media (max-width: 420px) {
        .generate-combined-page-header {
            height: 300px !important;
        }
    }
    
    @media (min-width: 421px) and (max-width: 768px) {
        .generate-combined-page-header {
            height: 600px !important;
        }
    }

    You can adjust the pixel height accordingly in the second rule for tablet.

    #568427
    Aaron

    So tablet is perfect both vertical and horizontal, and vertical view is good on mobile the only thing is that now the horizontal mobile view doesn’t show the full text is there a way I can fix that or should I just use the add content instead?

    #568457
    David
    Staff
    Customer Support

    Personally i would recommend using the Content, you can also use the H1/H2 tags for the content for better SEO

    #568473
    Aaron

    Ok I’ll give that a try thanks for your help.

    #568516
    David
    Staff
    Customer Support

    Your welcome. Let me know how it works out.

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