Skip Navigation

[Resolved] Image gallery creating a ‘whitespace’ artifact in the html rendered code

This thread is resolved. Here is a description of the problem and solution.

Problem:

There is a 'Whitespace-only text node" between each of the images being delivered from TS/DB. No matter what I do in CSS I cannot override the Whitespace element. Where is this coming from?

Solution:

They are not from TS, it is an issue of "inline-block", you will need to remove the empty space between each child "pkpPhotoStrip" HTML div tag, see the live example here:

https://codepen.io/chriscoyier/pen/hmlqF

Relevant Documentation:

This support ticket is created 4 years, 2 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.

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/Hong_Kong (GMT+08:00)

This topic contains 3 replies, has 2 voices.

Last updated by Stephen 4 years, 2 months ago.

Assisted by: Luo Yang.

Author
Posts
#1810597

Tell us what you are trying to do? I am trying to create a photostrip (randomized) with zero margin such that all images are rendered as a contiguous strip. There is a 'Whitespace-only text node" between each of the images being delivered from TS/DB. No matter what I do in CSS I cannot override the Whitespace element. Where is this coming from? Is this built in to TS?

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?
hidden link

#1810929

Hello,

They are not from TS, it is an issue of "inline-block", you will need to remove the empty space between each child "pkpPhotoStrip" HTML div tag, see the live example here:
hidden link

More help:
hidden link

#1811527

Initially, I had utilized divs not ULs. Your response indicated a resource that was referring to ULs; so I modified the tags to reflect and then applied the various troubleshooting solutions and found none of them to work. What's more, it appears that there is a UL tag for each of the items loaded from TS/DB. How do I format the code so that only one UL is rendered? What's more is there anything within TS that could be precluding the troubleshooting methods from working?

#1811549

My issue is resolved now. Thank you!