Aligning modules vertically and buttons centrally

BB Theme
1

Hi

I’ve used a call to action and picture module side by side in 2 columns at the top of my website (www.zalloys.com/wheelprotectors)

Can you help me with two things:

  1. The picture is slightly higher than the call to action module. I want to vertically centre the call to action module / it’s contents.

  2. The button is aligned horizontally left like the text. I want to keep the text aligned left, but centre the button horizontally within the CTA module.

I tried putting together some code from other bits I found in the forums, but it doesn’t seem to work.

/Vertically align heading call to action/
.heading-module {
vertical-align: middle !important;
}

/Horizonally align heading call to action button/
.heading-module .fl-cta-button {
float: middle;
}

Any help appreciated!

Thank you

2

Hi James,

Can you try the following CSS and see if this resolves your issue.

.fl-node-56dee8ef333e6 {
    align-items: center;
}
.fl-node-56deea23c0454 .fl-button-wrap {
    text-align: center;
}

Thanks,
Danny

3

That’s sorted it - thanks Dany :slight_smile:

4

Hi Danny - actually the vertical alignment didn’t work. Aligning the button horizontally did.

I’m working on a clone of the page now (www.zalloys.com/wheelprotectors).

What CSS would I need to vertically center the call out? And what CSS could I use to change the colour of the text in the call out? I’ve tried a few different things but they haven’t worked.

Thank you!

5

Hey James,

Can you add a class to that row, e.g., fl-align-center, then add the CSS snippet below and see if it’s what you’re looking for?

.fl-align-center {    
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

Ben

6

Hi

I’ve given it a class of “heading-module” and put the code in the css area (code below), but it hasn’t changed the vertical centering. When the browser screen is made wide, the text sits at the top of the row, as opposed to being in the center of the row (vertically).

The web pages I’m trying this on are www.zalloys.com/wheelprotectors, www.zalloys.com/wheel-protectors and www.zalloys.com/wheel_protectors. All of these have the class ‘heading-module’.

The class seems to work, as another bit of css referencing heading-module works - when I justify the text left, the button is still centered on the pages with the CTA (code at very bottom of this message).

Any thoughts?

Thanks for the quick reply

.heading-module {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.heading-module .fl-button-wrap {
text-align: center;
}

7

Hey James,

Sorry, you need to set the class to the column, not the row. It seems you’ve only applied it to the module.

Ben

8

That’s a winner - thank you!

9

No worries at all, James! Enjoy! :slight_smile:

Ben