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.

How to set the height for the Hero Widget?

Resolved 6 replies pluginplugin-widgets-bundlepremium
Ivar Junior
10 years ago · Last reply by Andrew Misplon 10 years ago

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 :)

URL: http://kids.swordplay.com.br

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

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Ivar Junior 10 years, 6 months ago

    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.

  2. Andrew Misplon Staff 10 years, 6 months ago

    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.

  3. Ivar Junior 10 years, 6 months ago

    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.

  4. Andrew Misplon Staff 10 years, 6 months ago

    For sure :)

    Let’s try this. Edit the widget concerned, click Attributes top right and enter a CSS class name:

    custom-hero-one

    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.

  5. Ivar Junior 10 years, 6 months ago

    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.

  6. Andrew Misplon Staff 10 years, 6 months ago

    For sure :) Glad to hear that helped.

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