Adjusting row and widget height.

[Vicky Brown]

How do you adjust the height of a row, and a widget or a hero image inside of the row?

[Bill Robbins]

Hi Vicky,

With a hero, that row will always be the full height and width of the browser window. If you’d like to have a different height you can do that. Edit the page you’re working on and then edit the row you’d like to have a height set on. In the “Advanced” section there is a spot for CSS styles. Add this:

height: 800px;

to set a height of that section of 800 pixels. You can also use proportional units like vh (viewport height — the height of the browser window) or vw (viewport width — the width of the browser window). That can be helpful if you’d like the row to grow/shrink with the browser window. Pixels will always remain constant.

Widgets can also have a height set the same way. Click edit on the widget where you’d like to set a height and look in the attributes box. The CSS Styles field there will take a height style as well.

You can also set the widgets in a row to have the same height. When you’re editing a row, look in layout and you’ll see a checkbox for that. It will make all the widgets in that row have the same height.

I use that in the demo to get the images that are next to the menu groups to be the same height. The images are added with a text widget as a background image in the widget. The widget itself has no text in it. Then I use the row option to have equal height widgets to cause the image to be the same size as the widget next to it.

Let me know if you have any questions,
Bill

[Vicky Brown]

Thanks, Bill. I was able to adjust down to 400 pixels and it works perfectly!

[Bill Robbins]

Fantastic 🙂

[Author]

Posts