Docs

[SkeeterHarris]

Hi,

I am trying to figure out the best way to align a link of separate text like “Read More” within the promotion box AND keep the boxes the same length. This seems to be harder than expected without creating a lot of empty white space, even after I’ve tried to keep the text copy the close to the same length per box as possible.

So I am doing two things – first off I found the short code [gap] and have used that within the text window for the option box, AND I have added (thanks to another question here) the following CSS to in custom css for each page that uses these promo boxes make the box have a minimum length.

.x-promo-content {
min-height: 340px;
}

A standard promo text box looks like this for me:

<h4>Education</h4>
<p style=”text-align: left;”>School property can provide a significant opportunity when looking for revenue sources to fund vital educational initiatives.</p>[gap size=”90px”]<p style=”text-align: center”>DISCOVER MORE</p>

Would you take a look and let me know if there is a better approach here to handle this? My goal is to have on Xtra Large, large, and possibly even medium for the boxes to stay lined up and with the link text aligned as well.

Attached is an example and i’ll provide creds below and here is the page this is on:

http://bcb.5d4.myftpupload.com/who-we-serve/

Thanks!

Skeeter

[SkeeterHarris]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue, please get rid of the gap shortcode first. And then you will need to add an inline css to the very first paragraph to make sure that each of this paragraphs will have the same heights. Perhaps a code like this:

<h4>Education</h4>
<p style="text-align: left; min-height: 180px;">School property can provide a significant opportunity when looking for revenue sources to fund vital educational initiatives.</p>
<p style="text-align: center"><a href="http://bcb.5d4.myftpupload.com/who-we-serve/#education">DISCOVER MORE</a></p>

Hope this helps. Please let us know how it goes.

[SkeeterHarris]

Hi Rue,

You are my hero, that did exactly what I needed as I was having similar problems on 3 different pages so using that inline CSS and adjusting that 180px min-height resolved it for me!

Much appreciated.

Skeeter

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts