New Year. New Fairy Garden.

Lily planting her fairy garden.

We have not one but two fairy gardens this year. This one is located on our deck and has some nice pieces that we gave Lily at Easter along with some things we had just sitting around. Only a few plants in here but they’ll grow big.

The other one is similar, but has bigger fairy garden pieces in it that she got last year.

We have a lot of fun with these gardens, but don’t go all out with the expensive decorations. Keep it simple and play with it.

More

Spin. Spin. Spin.

It’s amazing how much kids can spin around and not get dizzy. I use to be able to do this and now I’m done after just a few spins.

My daughter spinning around on playground
More

It’s a blizzard!

Lily out in a blizzard.

Lily and I went outside to enjoy the blizzard today. Lots of snow and lots of wind. It was fun for a little while but that wind & snow eventually hurts your face. Don’t let this picture trick you though, it’s much worse out there than it looks like.

More

Make Beaver Builder CTAs, Callouts and Info Banners align.

When using Beaver Builder, chance are you (or your client) will use the Call To Action (CTA) module, put a few in one row, and then realize that the button’s don’t align. 

CTA buttons out of alignment.

Then you’ll spend quite a bit of time trying to make them align only to realize that they don’t stay aligned at different break points.

Good news, I have some CSS that can help!

Add the following CSS to your WordPress child theme, or to the builder. It should render your modules now with the buttons all aligned.

CTA buttons in alignment.

/* ———————————————————————
Module: Call to Action
Requirement: You must have equal column heights.
Requirement: Button layout must be stacked.
———————————————————————— */
.fl-module-cta {
display: flex;
height: 100%;
}
.fl-module-cta .fl-module-content {
width: 100%; /* fixes IE11 */
}
.fl-cta-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.fl-cta-text {
flex-grow: 1;
}

view raw
bb-align-cta.css
hosted with ❤ by GitHub

Make sure to read the requirements in the code as well. Having the columns set to equal hight is a part of the alignment process. It also doesn’t work well when CTA buttons are inline, so make sure they’re stacked.

This doesn’t stop at the CTA module either. If you’re using the Callout module, here’s code to make them align.

/* ———————————————————————
Module: Callout
Requirement: You must have equal column heights.
———————————————————————— */
.fl-module-callout {
display: flex;
height: 100%;
}
.fl-module-callout .fl-module-content {
width: 100%; /* fixes IE11 */
}
.fl-callout {
display: flex;
flex-direction: column;
height: 100%;
}
.fl-callout-content,
.fl-callout-text-wrap {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.fl-callout-text {
flex-grow: 1;
}

view raw
bb-align-callout.css
hosted with ❤ by GitHub

If you’re using Ultimate Addons for Beaver Builder, here’s code for the UABB Info Banner module.

/* ———————————————————————
Module: UABB Info Banner
Requirement: You must have equal column heights.
Requirement: Should not have a height set in the individual modules.
———————————————————————— */
.fl-module-info-banner {
display: flex;
height: 100%;
}
.fl-module-info-banner .fl-module-content {
width: 100%; /* fixes IE11 */
}
.uabb-ultb3-box {
display: flex;
flex-direction: column;
height: 100%;
}
.uabb-ultb3-info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.uabb-ultb3-desc {
flex-grow: 1;
padding-bottom: 10px;
}

The same code can be modified to work with most any module, but it can be tricky based on how many wrappers each module has. 

I’ve tested this code back to IE11 and everything is working at the moment. If Beaver Builder changes classes, or adds more wrappers, it will probably need to be updated.

If you don’t know what Beaver Builder is, check out the quick start guide.

More

Baby animals on the farm.

Lily with different animals. Cat, cow, lambs.

My parents farm has more than just fresh air and four-wheeling, it also has baby animals! Kittens is what drew us down there over the weekend.

Three little balls of claws and energy. Three little kittens, and one little girl in heaven. She carried them around, put them in baskets, purses, and loved them as much as possible. There was also a baby calf in the barn and lambs just down the road.

No animals came home though. They sure are cute, but I don’t think we’re ready for any new animals around here.

More

Some Easter Fun

Peeps and Snow Bunnies

Had some fun on Easter. Created giant Peeps for the neighbors, made an even bigger bunny in the snow, and finished off the day with a fun Peeps Jello dessert.

More

Happy Easter!

I have to say that face painting is amazing. They’re getting bigger and better all the time. We love it. Especially when it’s free!

More