Home>Support>How to make hero image full width in North

How to make hero image full width in North

By Eric, 7 years ago. Last reply by Eric, 7 years ago.

Hello,

how do I make the hero image full width and resizeable just like the one in Vantage theme? (where you can go to appearance -> layout to change the bounding)
I would like to have something like in North’s site, https://siteorigin.com/theme/north/, the big mountain header image.

Thank you

Eric

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Eric,

    Please open the row housing the hero widget by clicking the wrench icon. Please head over to the row styles sidebar and open the Layout settings group. Set the Row Layout to Full Width Stretched. How does that look?

  2. 7 years, 4 months ago Eric

    you’re awesome! =)

    one more question, where do i find the setting for the height of the housing, so I can show more of the image vertically.

    Thank you!

  3. 7 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Eric,

    There’s no direct option for editing the height (as the height is dictated by the size of the contents of the row) but you can extend the spacing in the row by setting row padding. Please open the row and head over to the row styles sidebar. Open the layout settings group and set the padding to 0, then set the horizontal padding to the amount of spacing you wish to add – keep the values the same to keep an even amount of spacing on both the top and bottom. I would recommend removing this spacing on mobile devices (set the mobile padding to 0).

  4. 7 years, 4 months ago Eric

    Hi Alex,

    I’ve found inside the hero widget there is the height px, which i can make the image taller. =)

    Thank you for your help!

    Cheers!

    Eric

  5. 7 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Eric,

    Please note that setting a very high height could lead to responsive issues. I personally recommend the row/widget padding route over hero height.

  6. 7 years, 4 months ago Eric

    Hi Alex,

    but using the row/widget will only increase the padding but not the image itself. (unless i’m at the wrong setting…)

  7. 7 years, 4 months ago Alex S
    Hi, I Work Here

    Hi Eric,

    Oh! Sorry, I provided instructions related to the row for padding rather than the hero widget. Please open the hero widget and scroll down and open the Design and Layout settings group. Set the padding as desired there. Ideally, please set it as a percentage based amount as px based padding is static while percentage based amounts are dynamic.

    Alternatively, you can set a height but you should set it as a vh or vmin unit of measurement. As they, again, are dynamic while px isn’t (percentage cannot be used for height).

  8. 7 years, 4 months ago Eric

    great!

    i’ll try it out!

    Thank you!

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More