Greetings,
I’m developing this website http://a9f.783.myftpupload.com/ and as you can see, I have set the left margin on the Hero Image text so that it does not interfere with the image itself.
My challenge: in the mobile view, how to set the margins (or maybe the padding?), so that:
a) The hug is showing on the screen (instead of just the boy), and
b) The text is pushed back to the left margin.
I’m having trouble isolating those two things. Your help is greatly appreciated!!!
Lindsay
Hi Lins,
Can you please temporarily disable your maintenance screen so I can inspect your website? Alternatively, the plugin you’re using may allow for you to generate a specific access link which should allow me to bypass it.
Hi Alex,
Just disabled WP Maintenance mode ;-)
Hi Lins,
I wouldn’t recommend using a Hero widget in this instance. There’s basically no easy way to reliably do what you’re trying to do without making large compromises due to how CSS works. Ideally, I would use a SiteOrigin Image Widget and a SiteOrigin Editor widget. It won’t be on the image but it’ll be significantly more responsive and you won’t need to make any further compromises.
If that’s not an option, you need to reduce the text size as there’s far too much text present for this widget to be responsive without issue. Once reduced, please open the Hero widget and open the Design and Layout settings group. Remove the height (as in, have the field be empty) and set the Top and Bottom Padding to 5vmin and then set the Side Padding to 20vmin. How does that look?
Thanks Alex,
I need the text to sit on top of the image, and need to offer the trailer button on the image as well.
So, I tried changing the Design and Layout on the hero image, and removing some of the text, and reducing the size of the header text.
With these changes the image itself became shorter, thus cropping out the smiling children on the edge of the frame. That happened on my big desktop imac view, so I think any smaller screens would show even less.
So I tried increasing the Extra Top Padding setting to 80px (from 20px). It’s still not as tall as I would like it but I didn’t go farther because I didn’t know how that would impact the responsiveness.
Also, I would like the mobile view to show the part of the image with both of the people hugging (obviously the children on the side would be cropped out as well as pretty much everything else except the huggers).
What would you suggest in that case?
Hi Lins,
Your only real option outside of altering the hero widget as previously outlined (which would be the best course of action), would be to reduce the text further. Please open the Hero widget and open the Design and Layout settings group. Set the FitText Compressor to, well, try 1.25. You may need to use a slightly higher value. Outside of that, there are no real options outside of using CSS as sadly the hero widget wasn’t designed around this sort of usage.
Hi Alex,
I’ve been working on this a bit more, and made progress. Need a little more help, however.
On the mobile view, there is space between the menu bar and the first row. I’ve tried to change the padding in both the row and the widget, but it’s not working. Can you help me remove it? Thanks!
Hi Lins,
We’d like to help you with that, but can you please start a new thread with your question? This will allow others who have similar issues to find related posts easily. Sorry about this!
Page: New Thread
If you’re a premium user, you’re entitled to priority email support. If you would like to make use of that please follow the instructions found on your dashboard Page: Dashboard