In Agency Pro, vertically centering widgets in a new widget area

[jimr67]

Hi everyone,

I've registered a new widget area just below the header on my site. That all worked well. I adapted some CSS from the CSS for the "home-top" widget area to get the widget area formatted. I've added two widgets -- a search widget and a text widget -- and they are showing up next to each other nicely, using the "two-thirds first" and "one-third" classes to arrange them.

However, I can't get the widgets to be vertically centered in the widget area, with a bit of buffer space above and below in all viewport situations. The top edge of the widgets are right on the top edge of the widget area (and when the viewport is smaller, so the widgets realign one on top of the other, the bottom of the second widget is right on the bottom edge of the widget area).

The site is not live right now so can't share a link. Below is the CSS I have for the widget area:

.keyactions-widget-area {
min-height: 61px;
padding-left: 5%;
padding-right: 5%;
background-color: #b3c3dd;
font-family: 'Spinnaker', sans-serif;
text-align: center;
}

.keyactions-widget-area:before {
content: " ";
display: table;
}

.keyactions-widget-area:after {
content: " ";
display: table;
}

Any recommendations? Am I just missing something simple with padding or margins? Thanks so much for the help. If this can only be diagnosed with access to the site please let me know and I'll try to figure something out.

Jim

[Christoph]

Hi Jim,

without seeing the website it´s just a wild guess.
You can try margin: 0 auto;

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts