[Support request] Header in Mobile mode

Home Forums Support Header in Mobile mode

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1518746
    Lee

    Hello there,

    I’ve created a header for a page through Elements and it looks great on Desktop. However, not so much on mobile – only a small portion of the image appears.

    On mobile only, is there a way of minimising the photo to have it appear like it would if I were to set it as a featured image within the page itself?

    #1518813
    David
    Staff
    Customer Support

    Hi there,

    Scaling background images when there is content inside the container ( ie. the post title ) is tricky.

    If there was no content you could set the Top and Bottom padding as a % unit, to equal the aspect ratio of your image. For example your image is 782px(H) x 1174(W) divide the two and multiply by 100:

    782 / 1174 * 100 = 66%.

    Setting the top padding to 33% and bottom padding to 33% ( total 66% ) will maintain the original images aspect ratio.

    As there is content inside the container you would need to tweak these values down a little. eg 30%. It won’t be 100% perfect but will get you closer to the mark.

    Alternatively if you want to keep using Pixel padding, you can select the Mobile icon beside the padding and set a lower mobile value.

    Ideally you want all your featured images to be the same size ( aspect ratio ).

    #1518851
    Lee

    I understand. Thank you.

    Can I also ask, is there a difference in creating a header through Elements to creating a header within the page (builder) using the “Cover” option?

    #1518894
    David
    Staff
    Customer Support

    The main difference is a Header Element can be dynamic.
    So you can create 1 x Header Element, set it to display a Featured Image Background and the {{post_title}}. Then set the Display Rules to where you want it to appear. Then everything is automated, no need to create a separate container block for each element. It also has greater styling control then the cover block.

    #1518953
    Lee

    Brill. Thanks again.

    #1519234
    David
    Staff
    Customer Support
    #1575593
    Enrico

    Hi David.
    Please, I need your help. I followed your instructions and it works well in one site, but it does not work in another one, this one.

    #1575609
    Elvin
    Staff
    Customer Support

    Hi @Enrico,

    As this particular topic is resolved for the topic starter, can you open a new topic for your site?

    So you could use the private information text field incase some details are needed in solving the issue. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1575704
    Enrico

    I’m sorry Elvin,
    I will open a new topic.
    Thank you

    #1579151
    Elvin
    Staff
    Customer Support

    No problem. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

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