Blog, Website & Page Publishing

ColmK1997
Participant

White Spacing Problem on landing page

Does anyone know how i can get rid of the white spacing that's appearing on my landing page, under the titles "Table of Contents" and "Resources", so that no gap appears betwen the title and text? Link: https://www.sytorus.com/-temporary-slug-c94a557a-c100-406c-8ecc-6a0011869d2f?hs_preview=JYWRCDDN-355...

0 Upvotes
5 Replies 5
Ben_M
Key Advisor

White Spacing Problem on landing page

I am seeing more space under resources than the TOC.  Under Resources you have a few extra <p> tags that are causing that spacing.  You might need to go into Source Code View to see them (see below).  The other could only be caused by the bottom margin. It appears to be 30px and in the file: deurali-style.min.css .

 

Screen Shot 2020-09-30 at 1.48.13 PM.png

ColmK1997
Participant

White Spacing Problem on landing page

Hi Ben, 

 

Thank you for your reply but I have tried that and it messes up the bullet points, which makes the first little tick appear where Resources is even though it should appear on the first line. 

0 Upvotes
Ben_M
Key Advisor

White Spacing Problem on landing page

Try this code instead:

 

Remove the following from your ul li:before style:

top: 1px;

left: 0;

position: absolute;

 

And replace it with this:

 

margin-right: 15px;

 

Basically what was happening was that your list bullet was being absolutely positioned which is very tricky positioning to work with.  Absolute positioning is relative to the outermost container and since your lists were not in a positioned container, they were floating all over.  By default the bullet will be in line with the text and you can use margins to position it relative to your bullet text.

 

Alternatively, there is also a newer CSS markup that can be used instead of ::before which is ::marker which frees up the before selector for other things and makes more sense logically, but in effect they do the same thing in your list-style example.

0 Upvotes
ColmK1997
Participant

White Spacing Problem on landing page

Hi Ben, 

 

I cant seem to find that, is that in source code for that box? 

I have needed to add changes to the page and as you can see there's now white spacing under the "Did you know" and "Resources" section. 

 

https://www.sytorus.com/-temporary-slug-c94a557a-c100-406c-8ecc-6a0011869d2f?hs_preview=JYWRCDDN-355...

 

Colm. 

0 Upvotes
Ben_M
Key Advisor

White Spacing Problem on landing page

The code I mentioned in my last post would be in that same CSS document as before.  The "p" tags would be in the source code of those content sections of your page.