Need help? Check out our Support site, then


How to close up spacing in my resume

  1. Hi, I have a very long resume, and do not need to add to it with the very gappy spacing set in the Hatch Theme CSS rules. I've tried to follow the "Editing CSS" tutorial, but it stops short of how to actually do it.
    Thx!

    The blog I need help with is angelastinnett.com.

  2. Hi there, we have two things going on. the h5 heading element has a top and bottom margin on it that can be adjusted, BUT the ordered and unordered lists have a bottom margin on them, so adjusting the top margin on an h5, when there is a list above it may not result in a reduction in spacing. Both of these things can be adjusted globally in the CSS, but that means that all lists and all h5 elements throughout your site will take on that new spacing, and that might cause issues (example: ordered/unordered list before a paragraph of text).

    There are a couple of ways to do this. First would be adjusting the margins manually from within the page editor for the resume page. That way it doesn't have an effect on other pages or posts. You would do this by adding inline CSS styling to the opening tags on the h5 and ul elements in your post such as below for the unordered lists and adjusting the bottom margin value as desired:
    <ul style="margin-bottom: 10px;">

    and then doing the following to the h5 elements and adjusting the margins:
    <h5 style="margin-top: 10px; margin-bottom: 10px;">

    The second way would be to create rules in the CSS that specifically target the resume page by using the resume page unique ID found in the opening body tag in the HTML for that page. The following is an example that you can use as a base to adjust the top and bottom margins on that page only.

    .page-id-8 ul {
        margin-bottom: 10px;
    }
    .page-id-8 h5 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    You will have to work the two (ul and h5) margins together since the top margin on h5 and bottom margin on ul both create spacing in the same area.

  3. Hi - thank you for your response. I tried your code and didn't get the outcome I need.
    Please see the code I was messing with - between the /* */ codes. I was getting somewhere with that, but feeling my way in the dark [don't really know what I'm doing].
    Thank you!

  4. Can you point me to a location within your resume where the spacing is what you want, or about what you want?

  5. Sure!
    The spacing between these two is the only thing that gives me heartburn, but can live with it:

    Professional Experience
    ALSTON & BIRD — ATLANTA, GEORGIA 5/2014 – 7/2014

    I'm curious what you think of my code in working the spacing - did I do it right, or, it works but you don't know why?

    Thank you!!

  6. Ah, that we can fix. Open that page in the editor and add a margin-top to the style declaration in the h6 for ALSTON & BIRD — ATLANTA, GEORGIA 5/2014 – 7/2014 and adjust as desired, something like this:
    <h6 style="text-align:left; margin-top: 10px;">

  7. There are sometimes a number of ways to get the desired results and in most cases any of them can be used. Your coding looks solid and does the job. I don't see any red flags anywhere, so keep up the good work.

  8. Hello, I am having a bit of an issue with spacing on our site WordPress site gingerbreadhouselitmag.com. I'm trying to post a poem that has some crazy line indents; however, when I try the preformatting option, it changes the font to a much larger font and makes the spacing between lines almost double. I have tried to change the padding in code but nothing seems to work. I have the post saved as private now, but I can send you screen caps of the poem and the blog screen.

    Please, help!

  9. Thank you, but I don't understand where to add that.

    ... Ah, that we can fix. Open that page in the editor and add a margin-top to the style declaration in the h6 for ALSTON & BIRD — ATLANTA, GEORGIA 5/2014 – 7/2014 and adjust as desired, something like this:
    <h6 style="text-align:left; margin-top: 10px;">

  10. Open that page in the editor, switch to the Text tab and locate ALSTON & BIRD — ATLANTA, GEORGIA 5/2014 – 7/2014 and then add the margin-top: 10px; to the style declaration and edit the 10px to get the spacing you want.

  11. Text tab? Do you mean "Elements"? I still don't know where/how to add it. Is there a way to send you a screen grab of what I'm looking at?

  12. Also, I really don't know what you mean by "editor" and "style declaration"

  13. There is a "Text" tab at the upper right of the text edit window in the page editor: https://i.cloudup.com/IZNW1fkZO9.png

    It is where you can enter HTML code and such.

  14. Ok - thanks! I haven't been editing anything in this window. And I just tried to plug your code in and it didn't change, nor did it stay in there. I've been adding it to appearance/customize/CSS - right side popout.

    So I really don't know where/how to add this code to close up the space :(

  15. Ah, sorry. I just made the change on your Resume page. Visit it and see what you think.

  16. Wait, I made the change to your draft Resume. I don't see the change on your live Resume.

  17. Ok - thank you! I do need to make the change on the live resume. The CSS looks the same on both [in appearance/customize/CSS], so I don't know where you plugged the new code in. And the Text editing area doesn't seem to work for me. I bought the $30 customizability - why can't I do this?

  18. Nevermind - I found it - thank you so much!!

  19. You are welcome and do let us know if you have additional questions or problems.

  20. I do still have more issues, and am afraid I'm wearing y'all out!
    I can't find the html/css for the Portfolio page and projects pages.
    I need to remove "Post Format Archives: Gallery" from my Portfolio page. It should just say "Portfolio" [Like the About Me and Resume pages] - or, no titles at all.
    And, can I have the "featured images" on the Portfolio page [to fill out the grid design], but not have the "featured image" show up on each of the project pages?

  21. Hi, there isn't a direct way to edit that page title, which is created by the theme files, but we can use a little trick to hide it and then add "Portfolio" instead with the following CSS. The first rule makes the title invisible and the second adds "Portfolio" and sets it to visible.

    .post-type-archive-jetpack-portfolio .page-title {
        visibility: hidden;
    }
    .post-type-archive-jetpack-portfolio .page-title:before {
        visibility: visible;
        content: "Portfolio";
    }
  22. Hi [sorry for the long delay] - thank you for this. I don't know where to plug this in. There is no code window for the Portfolio page.

  23. That is custom CSS. You enter it at Appearance > Customize > CSS. Place that code at the bottom of any existing CSS you have already entered.

  24. GASP!! It worked!! THANK YOU SOOO MUCH!!!!
    Angela :)

  25. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags