Adding an image to Post content for use in Essential Grid

[henkvanderkuur]

Hi there,
With Essential Grid I made a post-based grid without using a Featured image. This means the media space is not used, just the ‘content’-space.
Instead of using a featured image, I want to be able to add an image inside the Post itself. However, when I do this, the content text goes to the edge of the container (which is set to margin-left: -40px;), discarding the padding(and margins) I set in Essential Grid (but work well for the first two items as expected).

If you look at this page:

https://www.pluspagina.nl/over-ons/

you’ll see that the top two Posts in 2021 are nicely positioned on the left, but the last one is not.
When I remove the image from the Post, it changes back to the normal Essential grid settings (same as the first two posts). So adding an image to a post makes the theme ignore the grid contents paddings/margins.
How is this possible?

As an alternative, I have tried to use a Featured image instead, with ‘Split Item’ > ‘Media Left’ set in the Item Skin Editor, to get an image on the left of the content, but that doesn’t work either.

Any ideas?

Thanks, Henk

[tristup]

Hi Henk,

Thanks for reaching out.
It seems that the padding was added through the custom CSS code to the first two posts whereas the last post is missing with it. I would suggest you add the following custom CSS code to add the padding to it.

.eg-washington-element-10-a
{
    padding: 20px 0px 40px 70px !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[henkvanderkuur]

Hi Tristup,
Thank you for your prompt reply and pointing me in the right direction.
This was not the complete solution though. All posts were styled according to the Item Skin Editor (so every new post added is styled in the same way). The styling of the Post-content that is displayed in the Ess-grid, changed when I added a hyperlink in the post-content.

What I think seems to be happening is: if I should add hyperlinks (or an image with a link) to the body text of the Post (in the Post itself), Ess-grid styles just those hyperlinks according to the Skin Editor (in this case class= .eg-washington-element-10) and uses a element class .eg-washington-element-10-a for the styling of the post-content itself (not the links). However, this ‘element-10-a’ does not use the Item Skin styling.

What worked for me is to completely style both elements in Theme Options CSS (outside the Ess-grid Item Skin Editor).
For the styling of the content hyperlinks (in this case .eg-washington-element-10) make sure to add “display: inline”.

I’m not sure if this bug is X-theme related or Ess-grid plugin.

So in my case I used the following in Theme Options CSS:

/styling of post-content/

.eg-washington-element-10-a {
padding: 20px 0px 40px 70px;
font-family: “Titillium Web”;
font-weight: 400;
font-size: 18px;
line-height: 23px;
color: #8e8e93;
}

/styling of the possible links added to the post-content/

a.eg-washington-element-10 {
display: inline;
font-family: “Titillium Web”;
font-weight: 400;
font-size: 18px;
line-height: 23px;
color: #8e8e93;
}

Hoping to help others that come across the same problem.
Thanks

[tristup]

Hi Henk,

Glad that you are able to find the solution and shared it with others. I will check the specific Skin and will report if anything is found related to the theme or plugin for further investigations.

Thanks