[Resolved] How to get header image to scale with mobile

Home Forums Support How to get header image to scale with mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1305589
    Leif

    Hi there I can’t figure out how to get my hero image to scale on screen size (aka a small desktop or a mobile page).

    Ideally the 1920px wide image would scale down for smaller screens then just float in the middle for larger screens

    I removed the header element from my page because it looked crazy but it had it set with <br> inside just to have something in there and 16% padding-top and bottom (to hit the 600px image height at 1920px…which also seemed like a really kludgy way to make the image be there entirely. 🙁
    But when I shrank my window it wouldn’t scale 🙁

    #1305958
    David
    Staff
    Customer Support

    Hi there,

    that method you used for your Header Element is the correct method to make it responsive.
    The only thing i would change is remove the <br> and in its place add a HTML comment eg.:

    <!-- hero element -->

    This will not display or occupy any space on the screen.

    16% top and bottom padding looks correct.

    Make sure you DO NOT have any values in the Mobile padding.

    #1314677
    Leif

    Wierd except for the BR that’s what thought I had.
    I did discover a way to make full-page responsive elements in Gutenberg and just used that to get around the issue.

    Thanks though!

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