This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Hero Image Resize / Mobile Responsive

Open 7 replies pluginplugin-page-buildertechnical
Roxana Reed
5 years ago · Last reply by Andrew Misplon 5 years ago

Hello,

Just trying Site Origin North and Page Builder with my new site. I’ve got a big hero image at the top, with a bit of text. However, on mobile the image gets chopped off. The image is a picture of me with a background, and in mobile it doesn’t look good. I know there’s the other widget like layout slider or something but when I tried that it still didn’t resize that well on mobile. Is there some custom css code I could add to make it more mobile responsive? Some like if the width is smaller than xxx to resize the image or perhaps even used a different image. Sorry, I hope that made sense!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 5 years, 9 months ago

    Hi Roxana

    Thanks for reaching out.

    The Hero has a Height and a Responsive Height setting. Start by ensuring you’ve set up an appropriate Responsive Height. You can also leave both empty. If you’ve set a Height then it’s best to set a Responsive Height. Next, ensure the FitText setting is enabled. Let us know how that goes.

    Unfortunately, it isn’t possible to change the background for mobile. The background uses background size = cover so it works best with certain types of images.

  2. Roxana Reed 5 years, 9 months ago

    Thanks so much for the quick response! Seems so obvious but I somehow completely missed the responsive height part. I’ve set my height 650px and the responsive height at 300px and it looks ok on my mobile, I’m just wondering how it would look on other mobiles/tablets. When exactly does the ‘responsiveness’ kick in? Is it when the screen is less than 599px or something like this?

    Also, I’ve used the fit text function, but it only applies to H1. On my hero image I also have some ‘paragraph’ text. Is there a way for this text to scale down too, because at the moment it looks too big and it covers some of my hero image that I don’t want covered.

    This is my site: http://roxanareed.com/ in case that helps you to see what I mean.

    Thanks for your help so far, that’s already a great improvement. I used this theme and page builder on an old site too and it was great so thought I’d stick with it here also :)

  3. Andrew Misplon Staff 5 years, 9 months ago

    Super, glad to hear you’re making progress. For the paragraph font size, perhaps try using something like 1.8 vh and see if that helps.

    https://www.sitepoint.com/css-viewport-units-quick-start/

  4. Roxana Reed 5 years, 9 months ago

    Hi again, I tried that with the vh value but it made the text smaller on desktop also and not small enough on mobile. I’m thinking it might be better to split my hero image into two columns and then have one column with just the text, and the other column with the picture of me, then on mobile they will stack one on top of each other instead, that might work better for what I’m trying to achieve.

  5. Andrew Misplon Staff 5 years, 9 months ago

    You could try increasing the value to help with desktop. You could also try experimenting with vw.

    With regards to your alternative idea, give the Layout Slider a try. It’ll offer you a mini-instance of Page Builder within each slide and should hopefully make the column process easy. Let me know how it goes, thanks :)

  6. Roxana Reed 5 years, 9 months ago

    Thanks for your suggestions. What I’ve done now is just made a regular row with 2 columns and made it full width stretched and 0 padding/gutter etc, then one column is the hero image but with just a plain background colour and the text, then the other colum is my actual image acting as the hero image but I made it a different size. Now it looks fine on both desktop and mobile. Thanks for your help anyway!

  7. Andrew Misplon Staff 5 years, 9 months ago

    Thanks for the update. I’m glad to hear you’re making progress. If questions arise in the future, please, let us know.

    All the best with your website.

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.

Have a different question or issue?

Start New Thread