Hi there, team, and thanks for the great themes and the widget bundle. I’m a user of Vantage Premium.
Is there a way to set a specific height for a Hero widget section? My Hero frames have slightly different heights (because of the text content in them; some have more words, others have fewer). Because of that, whatever other content come after this Hero widget seem to “bounce” up and down, which is not desirable.
If you need to see this issue in action, the website is http://kids.swordplay.com.br. It’s not in English, so please just scroll down until right after a section with the 4 pictures of our team (in round frames). Hope it helps.
Thank you for your time and keep up the great work :)
Well, I started tweaking a few things with the SiteOrigin CSS plug-in and things seem to be getting on track. Still, since I’m doing it on a trial-and-error basis (never worked with CSS before), I’d still welcome any pointers from the pros.
Hi Ivar
Apologies for the big delay.
Glad to hear you’ve been making progress using the SiteOrigin CSS plugin.
There isn’t a height setting for the Hero, it should adhere to the content added. If you need help adding a max height for a certain resolution, we could help out with a bit of Custom CSS.
It looks like you’ve shifted over to using the Slider widget. It looks great and seems to be working nicely. Let us know if you’d like us to look into this further for you.
Hi Andrew, thanks for replying.
It would be a big help if you could give me a couple of custom CSS codes to use in each instance of the Hero Widget. What I managed to find with the SiteOrigin CSS plugin was:
.sow-slider-image-wrapper { height: 265px; } .sow-slider-image-container { height: 265px; }However, this sets the same height for all instances of the Hero widget on the same page. What I need is something that can set the height of each instance of the widget, especially when the individual frames have different heights (which was my problem originally, since each had a different amount of text).
On that page I use the Hero widget 3 times. I only used the Slider widget near the bottom of the page. The solution above works, but I’d really prefer to have something that would work with each instance of the Hero widget, in case this issue comes up again in future expansions of the website.
Thanks again :) I’m already a big fan of the SiteOrigins products.
For sure :)
Let’s try this. Edit the widget concerned, click Attributes top right and enter a CSS class name:
Then prefix your height rule with your new class name. Example:
.custom-hero-one .sow-slider-image-wrapper { height: 265px; }Repeat as required.
Note that when we add the class name to the widget interface there is no period in front of the name. When we add it to Custom CSS there is a period in front of the rule name.
That’s exactly what I needed, Andrew :) Thanks for that (and for teaching me a bit about CSS too. I didn’t know about class names). I guess I’ll be studying a bit of CSS in the coming weeks.
For sure :) Glad to hear that helped.