WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Margin / Padding Problem (14 posts)

  1. TrekRight
    Member
    Posted 9 months ago #

    Hello - I'm a new user to Quark (finding it excellent so far). However, I've run into one problem so far that I cannot seem to be able to resolve.

    The URL of a page showing the issue is: http://caminopedia.com/?page_id=150

    On each page I am showing a title and sub-title for the reference information available on the page. Beneath that I have a horizontal rule. After that, there is a notable gap before my 'main' content is displayed. This gap doesn't appear when I view the HTML / CSS outside of WordPress -- so, there is some theme-based setting I am failing to override. However, I can't find it! I've used the developer tools in my browser to 'inspect' the elements but I can't see what is causing the problem.

    Any help would be greatly appreciated!

  2. Andrew
    Forum Moderator
    Posted 9 months ago #

    The horizontal rule has a lot of margin and you have some empty paragraphs above your main content that are contributing to the issue.

  3. TrekRight
    Member
    Posted 9 months ago #

    Hi Andrew - thanks for the quick response. Could you clarify your answer a bit, please -- I don't see any empty paragraphs in my HTML. What am I overlooking?

    Also, is there any way to modify the margin of the HR? (I didn't think HRs had any margin / padding!).

  4. Andrew
    Forum Moderator
    Posted 9 months ago #

    Which browser are you using btw?

  5. TrekRight
    Member
    Posted 9 months ago #

    Firefox and Chrome. Oh, and Safari sometimes.

  6. Andrew
    Forum Moderator
    Posted 9 months ago #

    Open your site in Chrome and right click on the horizontal rule or around it. Select 'Inspect element'.

    A new toolbar should appear with HTML on the left and CSS on the right.

    Hover your mouse over the <hr> element.

    In Chrome's development tools (the thing that you just opened) orange represents margin and green padding.

    Click on the <hr> element and look to the CSS on the right. You should see the CSS responsible for the margin.

    Explore the rest of the HTML for the stray <p> tags that are partly responsible.

    That should help you understand what CSS you need to override and whereabouts the empty paragraphs could be.

    http://developers.google.com/chrome-developer-tools/

  7. Andrew
    Forum Moderator
    Posted 9 months ago #

    Can you see that the styles that are applying the margin to the <hr> are in a "custom-css..." stylesheet? That hints that you have a Custom CSS plugin which has these styles in a setting somewhere in the dashboard.

  8. TrekRight
    Member
    Posted 9 months ago #

    Yep, I do (the Jetpack plugin). However, I still can't find whatever is causing the gap -- I've just over-ridden everything that I thought even vaguely might be affecting it.

    I'm definitely not an expert at CSS, but I'm not a novice either -- usually I can puzzle these things out. I'm totally stumped though. I appreciate your suggestions anyway. I'll keep at it and see if I can figure it out. Otherwise I guess I'll have to start over.

  9. Andrew
    Forum Moderator
    Posted 9 months ago #

    Deactivate all your plugins to narrow down which is causing the issue with the <hr>.

  10. TrekRight
    Member
    Posted 9 months ago #

    Hmmm. Never thought of that as a possible problem. Will give it a try - thanks.

  11. TrekRight
    Member
    Posted 9 months ago #

    Alas, that didn't seem to do it either.

    However, I've also tried removing the HR entirely -- the gap is still there. Thus, it doesn't look like the HR is the culprit (look at the current version of the page to see what I mean).

  12. TrekRight
    Member
    Posted 9 months ago #

    FYI, I in the developers' tool I now *do* see the empty paragraphs you previously mentioned. However, those are *not* in my HTML. I'm definitely confused!

  13. TrekRight
    Member
    Posted 9 months ago #

    Ah! So, it looks like the problem was a clearfix I was using incorrectly.

    Andrew, thanks for your help - your feedback definitely helped push me in the right direction.

  14. TrekRight
    Member
    Posted 9 months ago #

    Oops! Not fixed - what I thought was a fix in one browser completely broke my layout in another... oh well. Two days on this problem is too much time lost. Time to scrap this and start over! :-(

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.