• Resolved tree-of-nik

    (@tree-of-nik)


    I have a static home page at permitthefrog.com. As you can see, I’ve got a video slider and some posts (posts generated with tpg-get-posts plugin). I want to remove the large white space between the byline and the content. I’m fairly new to html and css and wordpress, so a little detail when giving me code would be nice.

    I’ve looked up other solutions but I can’t seem to translate the solutions to my theme code.

    Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • It looks like your theme is expecting a thumbnail image to be there.

    <a href="https://permitthefrog.com/new-members/">
    <div class="tpg-thumbnail-class"></div>
    </a>

    I’m not sure what that is supposed to do though because there’s no content provided in the Div either through CSS or HTML. I’m guessing that the theme is thumbnailing the featured image, and you haven’t supplied a featured image for that post. Just a guess though.

    You could try adding this to your CSS file:

    .tpg-thumbnail-class {display: none;}

    Thread Starter tree-of-nik

    (@tree-of-nik)

    So that didn’t seem to change anything, but I toyed around with some things and this seems to have worked:

    .tpg-thumbnail-class{
    	margin: 0 0 -5em
    }

    Now I’m trying to remove some of the space between the end of one post and the title of the next.

    In the source I see that you’re using
    <pre> and for paragraphs rather than <p>. I’m not sure if that is something you’re doing or if the Fearless theme is doing that.

    I don’t understand why it is being done that way. Normally <pre> is used for when you want to use preformatted text and it uses a monospaced font. But all the text is being spanned using verdana font which is proportional.

    The site doesn’t validate for a number of reasons and looking at the page source there are lots of mismatched tags, and nesting problems. This may be the theme’s fault but with that kind of code it’s hard to predict what the browser may do.

    Just in this snippet of code I find these problems:

    <div> inside of <pre>
    <div> inside of <a>
    <p> inside of <a> (and no closing </p>)
    <span><br /></span> instead of <p></p> to mark paragraphs

    All of that invalid code is going to make it hard to debug the CSS.

    <pre><div class="tpg-get-posts" ><div class="tpg-get-posts-post" ><div class="tpg-title-class"><h2><a href="https://permitthefrog.com/new-members/" >New Members!</a></h2></div><p  class="tpg-byline-class">By Nikolai on October 15, 2014</p><div class="tpg-content-class"><a href="https://permitthefrog.com/new-members/">
    <div class="tpg-thumbnail-class"></div>
    <p></a><span style="font-family: verdana;">some text<br />
    </span><span style="font-family: verdana;">some text<br />
    </span><span style="font-family: verdana;">some text<br />
    </span><span style="font-family: verdana;">some text<br />
    </span><span style="font-family: verdana;">Nikolai</span></div>
    </div></div><!-- #tpg-get-posts -->

    I guess what I’m saying is before you get to far into this you might want to look at a theme that creates better code for you.

    Thread Starter tree-of-nik

    (@tree-of-nik)

    I realize the theme isn’t the most CSS friendly – I’m told I can’t do anything with that for the site.

    I’ve fixed the spacing for everything and re-formatted the code so that I didn’t have to span the font (that was done manually in a post).

    Most of the code you’re seeing is being created by a plugin called tpg-get-posts anyways.

    Thread Starter tree-of-nik

    (@tree-of-nik)

    I appreciate your help, though.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to remove space between Post Title/Byline and Content?’ is closed to new replies.