Grow your CSS skills. Land your dream job.

Blog Page CSS Question

  • # March 17, 2013 at 11:36 pm

    I am trying to eliminate the spacing on my blog post http://chris-schilling-4lzz.squarespace.com/blog/ so that the title and details below are closer together. Would be nice to have everything spaced similar to my old site. http://www.jobspark.ca/job-listings/
    I am having problems accomplishing this without it is affecting the post text once opened.

    Thanks for any help you can provide.

    # March 18, 2013 at 12:53 am

    I don’t know if you are aware of this, but people who don’t have a Squarespace account are unable to view the blog post on your site.

    As far as achieving the desired effect, I would use margin to add space between the time stamps and the title and details of the post.

    # March 18, 2013 at 1:05 am

    http://chris-schilling-4lzz.squarespace.com/

    If you go to the site, it should let you click guest access and enter that way. The page I am working on is the Job Posting page

    # March 18, 2013 at 1:19 am

    On site.css, line 7518, .collection-type-blog .details currently has a padding-top: 25px; if you adjust this, it will move closer. Try padding-top: 0px; and see how you like that. Also it looks like the .collection-type-blog .details currently is being defined multiple times, maybe fix that up.

    # March 18, 2013 at 1:58 am

    That seemed to fix the padding issue but when you click on the blog entry and it opens up the page the text is all crunched together.

    http://chris-schilling-4lzz.squarespace.com/

    # March 18, 2013 at 7:48 am

    Not sure what this is doing…

    .sqs-layout {
    margin-bottom: -24px;
    }

    but that is what is ‘crunching’ the text.

    This isn’t helping either

    .collection-type-blog h1.post-title {
    margin-bottom: 0px;
    }

    Also..

    Line 7518

    .collection-type-blog .details {
    color: #000000;
    padding-top: 0px;
    }

    is overriding Line 6723

    .collection-type-blog .details {
    padding-top: 25px;
    color: #000000;
    }

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".