Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Fresh & Clean Theme - Homepage Image Margin

  1. 11213org
    Member

    Hi,

    My site is http://11213.org and I have the custom CSS upgrade

    I am using my homepage for images that link to posts/pages

    If you look at the "Home" (or "Calendar") page at the space above the image - there is a wide gap between the top of the image and the page bar

    On the "About" page (http://11213.org/about/) the gap between the top of the video and the page bar is smaller.

    On the "Archive" (http://11213.org/archive/) page the gap between the top of the first image thumbnail and page bar is smaller.

    I would like to make the gap on the "Home" page a bit smaller to match the way it is on the "About (or "Archive") page.

    What is the CSS code to do that?

    Thank you

    PS: While on the subject of image margins, on the home page under the main large image there are 4 smaller ones - they were centered in the "Visual" side of the page editor. For some reason the 4 images together are not exactly centered but are pushed slightly to the left so the gap on the right side is bigger than the gap on the left side - please let me know how to adjust this if it cant be done in the visual editor - what about CSS?

    The blog I need help with is 11213.org.

  2. houstonweaver
    Member

    Your calendar page image has a lot of white space at the top. I see a line where the image begins and looks like it is the same distance down from the page bar. Crop your image of the calendar page and it will be better.

    I see what you mean about your spacing of the images. I don't have an answer for that one.

  3. 11213org
    Member

    Maybe using the calendar page wasn't a good example

    Look at the homepage http://11213.org/

    That gap compared to the gaps on the "About" and "Archive" page mentioned above

    Thanks

  4. houstonweaver
    Member

    I do see what you mean. Have to leave it to others to solve. Good luck.

  5. 11213org
    Member

    Anybody know what I can do?

    Thank you

  6. 11213org
    Member

    Anybody?

  7. designsimply
    Staff

    I compared the space above the "#main" element in http://11213.org/ and http://11213.org/about/ and the gap appears the same to me. Take a look at the purple arrow in this screenshot: http://cl.ly/Lp0w

    Is that the space you're referring to or am I looking at the wrong thing?

  8. 11213org
    Member

    Just noticed your new post now

    This question was asked a while ago since then I changed to the standard slider homepage - and yes that does have the same size gap.

    However I do plan on switching back to the custom homepage I had when I originally posted this.

    This is not my live homepage now but this is what it looked like:
    http://11213.org/king-in-the-field/

    I am planing on switching back to this format any day now and if I can have that margin issue figured out that would be great. (I may post an image in that 900x500 space or a video either way it leaves a big gap above it)

    Thank you for your help.

  9. designsimply
    Staff

    Thanks for the link. Example links make it so much easier to help!

    To get rid of the spacing below the menu on the http://11213.org/king-in-the-field/ page, try adding the following to your Appearance → Custom Design → CSS editor:

    #access {
	margin-bottom: 0;
}

    If you want to apply that rule to just the http://11213.org/king-in-the-field/ page, you can look in the body tag to see what specific classes it has and use one of them in the selector to make it work for just that page. http://11213.org/king-in-the-field/ has a body class of "page-id-1763" so you could do this:

    .page-id-1763 #access {
	margin-bottom: 0;
}

    Or if you find that you only want to make that adjustment to the home page (after you switch it), put ".home" in front of the selector to get this:

    .home #access {
	margin-bottom: 0;
}

  10. 11213org
    Member

    OK...

    I see that adding the code across the board ruins the margins on all the other pages

    So I added it to just that draft page (http://11213.org/king-in-the-field/)

    If you look now, you will see it moved up but too much and doesn't match the other pages (for example: http://11213.org/about/)

    I noticed that if I edit the number "0" in the code you give me, the gap gets slightly larger with each point I add...

    .page-id-1763 #access {
    margin-bottom: 0;
    }

    So is there an exact number to put in place of that "0" that all the other pages have to make it match exactly or is it just based on how it appears?

    Once we get that, I would like to know - How do you find the "page id"? Since the page I have been using was just for testing and not the page I will go live with... (For now it wont be the home page either) so how do I find the "page id" so I can use it when I like, on only the pages I like?

    Thank you very much for your help

  11. designsimply
    Staff

    So is there an exact number to put in place of that "0" that all the other pages have to make it match exactly or is it just based on how it appears?

    Well, the spacing below the nav bar is the same for all pages if you don't add the rule for the http://11213.org/king-in-the-field/ page:

    .page-id-1763 #access {
	margin-bottom: 0;
}

    It's just that the image at the top of that page has its own extra padding, and that's probably what should be removed instead. Give the following a try, it's probably a better solution now that you've posted some specific examples and I have a better idea of what you're trying to do:

    1) Remove the "page-id-1763" custom CSS
    2) Open the page for editing
    3) Click the image in the visual editor
    4) Click the image edit icon that appears
    5) Click the "Advanced Settings" tab
    6) Add this to the "Styles" field: margin-top: 0;
    7) Click "Update" to save the image change and then save the post

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags