Skip Navigation

[Resolved] Spacing Problems

This support ticket is created 2 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 1.85 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 8 replies, has 2 voices.

Last updated by chrisO-12 2 years, 8 months ago.

Assisted by: Waqar.

Author
Posts
#2312725
Content Template with margin not working.jpg

Tell us what you are trying to do?
I have created a content template for a custom post type (being used for a user profile). The content template in two places: 1) as the detail view for posts created when a user profile is submitted; and, 2) on a user profile page that uses a view containing the content template that is filtered to show posts where the post author is the the logged in user.

In the content template, additional margin was used for fields to keep them from overlapping.

When the content view is opened for the detail view of the user profile, the spacing/margin works properly.

However, on the page where the content template is contained in the view, the spacing/margin does not work and the fields are overlapping.

There is no additional CSS applied, and when I inspect the code for these two places, it looks the same.

How do I make the spacing work properly where the content template is contained in the view?

What is the link to your site?
Staging site. Image uploaded. The image on the left is the content template that is opened from an archive page showing the detail view with correct margin between fields. The image on the right is how the content template looks on the user profile page where the content template is contained in the view where the margin does not work.

#2312851

Hi,

Thank you for contacting us and I'd be happy to assist.

To troubleshoot this, I'll need to see how this content template is set up in the admin area.

Can you please share temporary admin login details, along with the links to the pages from your screenshot?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

#2314037

Thank you for sharing these details.

The user that you've shared is not an administrator role user, so I was not able to see how the content template is set up.

I see the overlapping text, even on the single broker post page.
( screenshot: hidden link )

On the membership account page with the view, I don't see any results, because the user I'm logged as doesn't have a broker post.

From the front-end code of the content template of the single broker post page, it seems that you're using multiple "Fields and Text" blocks to show the text from the multiple custom fields, and some of those blocks have negative top margin values.
( here is a screenshot of how the same text shows without the negative margins: hidden link )

Instead of using the negative margin values to adjust the vertical spacing between those text lines, you can remove the paragraph tags from those blocks and set a positive bottom margin for blocks where you'd like to have some space below.

#2314237

Hi Waqar,

I have changed the role to administrator -sorry about the error here.

The membership page is the one on which the text is overlapping. This happens even though I am using the same content template on the membership page.

I was using the negative margins because of the excessive space between the "Field and Text" blocks. I did not see an easier way to do this. I am using the block editor. How do I remove the paragraph tags from these fields?

#2314243

Waqar,

I rechecked, and the Membership page is the one that does not overlap. The single broker post page is the one on which it overlaps. Both of these pages use the same content template.

#2316283

Thank you for enabling the administrator role.

I removed the negative margins from the "Fields and Text" blocks and also removed the paragraph tags from their content, by switching to the "HTML" mode.
( example screenshot: hidden link )

Next, to show some extra space after the "first and last name" line and the "city, state, zip" line, I included '20px' bottom margin, to their respective "Fields and Text" blocks.
( example screenshot: hidden link )

You'll see that the overlapping text issue is fixed now, on both those pages.

#2316387

Hi Waqar,

I see that this solved the overlapping. Thank you for the correction.

Why does this occur only using the block editor, since the same content template is used on both pages? The block editor seems to work in some cases, even though the negative margin was required to reduce the spacing.

Also, I notice that the image size is different on two pages. Is this problem related to the overlapping issue?

#2316957

Glad I could help.

Because the content template is placed inside the view's loop in the membership account page, the paragraph tags were being processed differently, compared to when used directly on the single broker post pages. This resulted in the difference in the styling, which is fixed now.

The difference in the image size is due to the difference in the available width to show the content template content. On the single broker post page, it has the full width available. But, on the membership account page, the view's loop is set to show the results in 3 columns, which is why it has 1/3 of the page width.
( screenshot: hidden link )

You can change the column count option to '1' and the content template will have full width to show the content.

#2317389

Ahhh. I see the grid setting now. I did not know that it was there.

Thank you for your prompt reply and for providing the solution.

My issue is resolved now. Thank you!