Promo Element not even

Support
#1

I have 3 promo elements i’d like to be equal height regardless of the content / text within them. What CSS code should I use.

How do you add an ID to these each so they can be controlled by CSS?

site: Thatsmytech.com the issue is on my main page.

#2

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (min-width: 768px) {
.home .x-promo-content {
    min-height: 520px;
}
}
#3

The .home part of this is the ID of the promo content correct? How do I assign individual ID’s to each of the 3 promo contents?

#4

Hi There,

.home referes to your home page.

You can add an ID to each of your promo contents and add the following code instead, if you use ID = id-1

@media (min-width: 768px) {
.#id-1 .x-promo-content {
    min-height: 520px;
}
}

Hope it helps

#5

Why is this code not working for me when it did once before

#6

Sorry the correct code should be:

@media (min-width: 768px) {
#id-1 .x-promo-content {
    min-height: 520px;
}
}
#7

Can you explain this code?
How can I set give objects an ID for instance how can I set one part of the promo an ID then use this code changing the id part of it so its only for that one section.

#8

the .site code actually worked, another question… See the attached picture. The right or 3rd promos text is not aligned. how can I match it to the first 2?

#9

How can I better align my font awesome icons on the bottom of these promo elements?

thatsmytech.com

#10

Hi again,

I checked your page and there are no font awesome icons in your promo elements (see screenshot) have you removed the icons?

#11

No when I am logged in cornerstone shows them but when I look on the live site they are X’s. Weird.

#12

Hi again,

This could be possible due to the cache, please clear all cache and if your hosting is using server cache, make sure to purge it as well.

Hope this helps!

#13

This is an actual issue at this point now i’ve checked with my hosting company and cleared cache on my machine and tried other machines. the icons show in cornerstone when I type the code but not on the actual site. can you check this out? maybe im doing something wrong?

#14

Hi there,

Please check it again. You added them as if you’re really adding font awesome classes ( fa fa-), I went ahead and fixed them.

Thanks!

#15

Appreciate your help with that, I also still am having difficulties getting the sizing and spacing right for the text and icons to match each other. I’ve tried multiple things and would love to see how you do it so I can match your steps for the future.

Appreciate your continued support.

Joe

#16

Hi there,

There is no permanent solution for that, each column and element height is based on its content. The longer the content and the varying words, the taller it can get, and the icons will not line up. Example, there is a word that could take one line, which simply adds one more line to the height, where it another column, there are multiple words in one line.

Adding min-height is the only workaround for now, but still lacking due to the nature of text contents.

Thanks!