Hello,
I have a question about changing the vertical position of the text on the hero image. I’m using the widget as a homepage slider, and used the following custom CSS code:
.sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper {
margin: 150px !important;
}
Which worked great, but obviously this rule now applies to ALL of my hero images, which isn’t ideal. Is there a way to isolate this code to it only applies to the hero on the homepage? Or have I missed a setting somewhere that would allow me to change the vertical position without using custom ccs?
Thanks for your help!
Polina
Hi PSBakh,
Open the hero widget you wish to apply this CSS to and head over to the widget styles sidebar. Open the attributes settings group and set the widget class to, for example, hero-example_spacing then save the page and navigate to WP AdminAppearanceCustom CSS and replace the CSS mentioned in your initial post with the following CSS:
.hero-example_spacing .sow-slider-image-wrapper { margin: 150px !important; }Amazing! All fixed.
Thank you for your help, Alex :)
I’ve spent an hour trying to get vertically centred text on a hero (actually all my heroes) that looks good on my computer and a mobile (without the text running off the bottom of the widget). I’ve been trying to adjust padding px and %, header sizes, and clicking and un-clicking fit-text. Am I to understand that it’s not just a matter of happening on the magic combination of standard settings?
Update on what worked for me:
– Have no leading carriage returns before the text in the frame of the hero
– Set height to 100%
– Set top and bottom padding to 10% (or whatever)
– Delete any numbers in the side padding and heading size boxes
– Click ‘Use fit-text’
I don’t know why I was having so much trouble before – probably because I was using px rather than % and using carriage returns to try to get the text in the middle.