[Resolved] Adding padding round grid text content only

[Author]

Posts

[Pete]

Hi there,

See this site in your showcase: hidden link

How have they added padding round the lower text area of each grid item and made just the background of the content white.

We can add a class however nothing we do makes this work.

This a test page on our site with a similar grid: hidden link

Thank you in advance.

[Luo Yang]

Hello,

Please elaborate the question with more details:
Which one is the the lower text area? How do you setup the lower text area?
Where and how do you want to add the padding round and background of the content white?

And it seems to be a custom CSS problem, I suggest you follow CSS documents to setup your custom CSS codes:
hidden link
hidden link

[Pete]

Hi,

Well as shown in the image (with red), they have somehow put padding round the whole area and made this background white.

We know about CSS however can't find just 'one' element to do this on our girds here:
hidden link

[Luo Yang]

Thanks for the details, I have tried the showcase URL you mentioned above, those CSS codes(padding and background color) are defined in your website CSS file:
hidden link

They are applied to CSS class name ".contenedor-info", see screenshot contenedor-info.JPG

You can setup CSS codes to override them, for example:

.contenedor-info {
    padding: 0px !important; 
    background: red !important;
}

[Luo Yang]

In your website:
hidden link

I suggest you setup a HTML div tag to wrap all the lower text area, for example:

<div class="my-class"> ... </div>

Then apply your custom CSS codes to above div tag, like this:

.my-class{
    padding: 15px; 
    background: #fff;
}

[Pete]

I tried this yesterday. I added a class to the section the 'view' is located in Elementor.
I have added the CSS to our Child Theme.

This did work hence I thought I'd reach out to support.

This the test page: hidden link

[Luo Yang]

Please provide a test site with the same problem, fill below private detail box with login details, I can setup a demo for you, thanks

[Pete]

Hi Luo,

I saw your second message after I sent my reply. Yep got it 🙂

I didn't release you could add HTML div tags round text areas within Toolset, done that and got the result, many thanks.

Lastly, is there a way of making the featured image, link to its post? This I guess would start of looking like the below?

<div class="feat-image-link">
[wpv-post-featured-image size="large"]
</div>

[Luo Yang]

Yes, it is possible, you can setup the HTML link like this:

<div class="feat-image-link">
<a href="[wpv-post-url]">[wpv-post-featured-image size="large"]</a>
</div>

More help:
hidden link
Outputs the URL to the current post.

[Pete]

Thank you Luo,

This all worked great. Appreciate your help and patience with this 🙂

Regards, Pete