-
Hi
I have a GP Post Template for recipes set up on the site below.
It includes 2 containers:- Ingreditents
- Method
with static headings and dynamic text underneath.
The dynamic text comes from ACF wysiwyg fields (UL and & OL), which has the following code in custom CSS
/*List Styling on Recipe Posts*/ body.single-post .dynamic-content-template ol li { margin-bottom: 2em !important; } body.single-post .dynamic-content-template ul li { margin-bottom: 1em !important; }The problem is that it creates too much space at the bottom of each container (where padding would go, but it is probably the list custom CSS).
When I inspect the CSS, there also seems to be a non-existent <p> line at the bottom of each container.
Any suggestions for adjusting this would be much appreciated, whether they be CSS-related to the containers or lists.
Cheers
Shaun -
Hi Shaun,
It seems like the extra padding is caused by an empty paragraph block.
All you need to do is edit the post template and remove those empty paragraph blocks.
-
Thx Alvind
Unfortunately, I cannot see the paragraph block in the template. I can only see it when I inspect the CSS in the browser. (It is highly likely me), but have a look at the attached (below) screenshot and see what you can advise
-
It might be coming from the WYSIWYG field. Try checking the field for that post to see if there are any extra
<p>tags inside it. -
Hi Again Alvind
I haven’t been able resolve the issue through ACF. But I have found a partial solution using the following:
body.single-post .dynamic-content-template p:last-of-type { display: none !important; }The CSS fixes the spacing issue. But it hides other paragraph text on the template as well. So, I wanted to see if you could advise how to only apply the above CSS to containers with the class ‘recipe’. See below video for more
-
Try this instead:
body.single-post .dynamic-content-template #ingredients p:last-of-type, body.single-post .dynamic-content-template #steps p:last-of-type { display: none !important; } -
Thx Alvind
That worked perfectly.
-
Glad to hear that!
- You must be logged in to reply to this topic.