Docs

[pdopchev]

Hi guys,

Been trying to remove the image div from the promo element but with no luck so far. This is what I have for code:

.coach.x-promo-image-wrap {
  display:none;
}

the class assign to the promo is “coach”

link:http://www.crestedbuttesnowsports.org/partners/ (top of page)

[Thai]

Hi There,

I couldn’t see the coach class in your promo elements.

You can try with this CSS:

#x-section-10 .x-promo-image-wrap {
    display: none;
}

Hope it helps 🙂

[Lely]

Hi There,

Thank you for the URL and the screenshot.
Please use this custom CSS instead:

.coach .x-promo-image-wrap {
    display: none;
}

The space between .coach and .x-promo-image-wrap means .x-promo-image-wrap is inside .coach. Leaving no space means that both of them are class of the same element.

Hope this helps.

[pdopchev]

Thank you so much for the help and the quick CSS lesson. Unfortunately,

.coach .x-promo-image-wrap {
    display: none;
}

is not working… The image holders are still there. Or am I mistaken and this is something else – at the bottom of the promo elements?

[Rupok]

Hi there,

I got it. You have placed the below code that’s causing this:

.x-promo.coach {
  min-height: 425px;
}

Let’s remove this to get rid of this.

Cheers!

[pdopchev]

Hi, that is correct! I did place the media query to adjust the height of the boxes to be the same. Similar code was placed in this page: http://www.crestedbuttesnowsports.org/bios and the boxes don’t have a shadow at the bottom – I am assuming the reason would be they have an image at the top… might be wrong!

Is there a way to keep the same height of the boxes (as this is a requirement of the client) and get rid of the shadow (different color) at the bottom?

Thank you!

[Rupok]

Hi there,

You can still set a minimum height :

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

Let’s just add this to set the background color to white so that the blank image holder is not visible :

.x-promo {
  background-color: #fff;
}

Cheers!

[Lely]

Hi There,

Yes, you’re correct. On this page:http://www.crestedbuttesnowsports.org/bios/ since there’s an image on top, the height of the entire element is more than 425px. But then here:http://www.crestedbuttesnowsports.org/partners/ the height of the element is less than that because there’s no image just text. Let’s try adjusting the CSS to the following. The height will be applied to the text container with white background so the gray background is not visible.

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

Hope this helps.

[pdopchev]

Thank you so much for the help, guys!

The last css code works great!

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

[Nico]

Great! glad to hear that it worked. Thank you also for sharing the solution.

It would really help others if the see it.

Thanks. Feel free to ask us again.

[Author]

Posts