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!
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.
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 :)
Super, glad to hear you’re making progress. For the paragraph font size, perhaps try using something like
1.8vhand see if that helps.https://www.sitepoint.com/css-viewport-units-quick-start/
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.
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 :)
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!
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.