[Resolved] Hero image size

Home Forums Support Hero image size

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1520738
    ken

    Hi,

    I am trying to size my hero image such that it’s responsive for all sizes > 1024px. My image size is 1920px*307px, the width is corretly displayed from 2000px but from ~1520px it starts to be reduced. From the various posts that I read and testing myself I think it might have something to do with the height? Padding? How do i set them correctly? I want the image to be full width throughout all the screen sizes.

    If it helps to look at the site, feel free.

    Thanks!

    #1520850
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry, which image are you referring to here?

    The big image on the front page?

    #1521350
    ken

    sorry, i am refering to the hero/banner image (with the word about on it) in this page .

    #1521550
    David
    Staff
    Customer Support

    Hi there,

    edit the Header Element, change the top padding to 15%
    Then set the background position to Center Center

    15% is the aspect ratio of the original image.
    ie.

    210px (H) / 1324px (W) * 100 = 15%

    #1522994
    ken

    Hi there,

    I am not sure what happened but I couldn’t see the element anymore. When i first changed the settings in header as you mentioned, i see that the sides (with pink color) disappeared and then i adjusted the padding to 10% instead of 15%. After that I couldn’t see my hero image anymore.

    Can you tell me what happened?

    #1523008
    Elvin
    Staff
    Customer Support

    Hi,

    I am not sure what happened but I couldn’t see the element anymore. When i first changed the settings in header as you mentioned, i see that the sides (with pink color) disappeared and then i adjusted the padding to 10% instead of 15%. After that I couldn’t see my hero image anymore.

    Can you tell me what happened?

    I don’t see any <div class="page-hero">(Header Element) in your page.

    Perhaps you’ve changed the Display Rule location or accidentally trashed it?

    Can you verify? Thanks.

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

    #1523420
    ken

    Hi Elvin,

    I checked the Display Rule location and it’s set to page and the foundation (which is the name of that page).

    #1524068
    David
    Staff
    Customer Support

    Do you have any other Header Elements ?

    #1524881
    ken

    Hi David,

    No.

    #1525038
    David
    Staff
    Customer Support

    Does the Header Element contain any content ?
    If it doesn’t then add a HTML Comment like so:

    <!-- page hero -->

    This won’t display on the frontend but will force the hero to be displayed.

    #1525485
    ken

    It’s working now. Thanks! However, the image i inserted has pink color on the side, I am not seeing them anymore. Could you advice on how to scale it such a way that the whole inserted picture in shown?

    Thanks!

    #1525595
    David
    Staff
    Customer Support

    Remove the bottom padding. So you only have 15% top padding.

    #1525751
    ken

    it works thanks!

    #1526272
    ken

    Hi David,

    I applied the same thing to the other pages but the header isn’t showing up for some reason, can you help?

    #1526317
    David
    Staff
    Customer Support

    Did you resolve this? I am see Header Elements on most of the site now.

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