Column height needs to fill space

Support
#1

@Nabeel, you provided the following for this page https://goalsarecool.com/training-library/

@media (min-width: 768px) {
.page-id-13892 #x-section-2 .x-promo #orange-button {
position: absolute;
bottom: 30px;
width: calc(100% - 3.5em);
}
.page-id-13892 #x-section-2 .x-promo {
position: relative;
min-height: 520px
}
}

It seems to work well and I’m trying to accomplish the same thing for the boxes on this page https://goalsarecool.com/

Can you please assist?

Thanks!

Blake

#2

Hi There,

Please add this custom CSS under Customizer > Custom > Global CSS:

.home img.x-img {
    margin-bottom: 0;
}

And in the section #6, change the gap at the bottom to 30px.

Hope it helps :slight_smile:

#3

It worked for the top two images, but not the bottom 2. Also, it doesn’t look good on tablet or mobile. How can I fix the following:

1.) On the bottom two images, how do i remove the extra space?
2.) On tablet, how how i make it look like it should look on desktop?
3.) on mobile, how do i make sure the images are on top and text is below?

#4

Hey There,

Thanks for writing in! Regretfully, further customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at [email protected] if this is of interest to you. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.