Grow your CSS skills. Land your dream job.

Masonry & WordPress

  • # April 30, 2013 at 8:34 pm

    @mintertweed `:last-child`?

    # April 30, 2013 at 9:46 pm

    @chrisburton: I thought about that, but within the Masonry concept, would it ever recognize a div that is indeed the last-child of a particular row of posts?

    Edit: This is the correct usage of :last-child, right?

    #linky .boxy:last-child

    If it is, then it’s not working. Click here to see. “Introduction” should be all the way to the far right, but it is being pushed down to the second level of posts because it thinks there is not enough space.

    # April 30, 2013 at 10:35 pm

    Well, for one, you haven’t told the `:last-child` to have a 0 right margin.

    # April 30, 2013 at 10:43 pm

    Okay, added margin-right: 0px; and I checked it in Google Chrome. Nothin’. I didn’t realize you had to state 0px. I thought the code for :last-child would override the other.

    # April 30, 2013 at 10:46 pm

    Nope, you have to specify. All you’re doing is targeting the last child and telling it to do something else (perhaps). Checking what might be the problem. I’ll post back or update this.

    # April 30, 2013 at 10:49 pm

    add this

    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    # April 30, 2013 at 10:52 pm

    Okay, added. It threw everything out of whack. You can check it here. I gotta head to bed. Have to wake up early. I’ll revisit everything tomorrow. Later!

    # April 30, 2013 at 10:54 pm

    The only thing I see that seems to be an issue is the header. Can you confirm that whenever you get time? If so, this should be quite easy to figure out.

    I’m also heading out so I’ll come back tomorrow.

    # May 1, 2013 at 7:36 am

    Yeah, the header is a bit screwy. But also, the opening statement on the front page is only taking up half the screen and flowing on three lines. And the posts should be taking up the entire 960 pixel width and it’s not. Also, if you visit my “Contact” page, here, you will notice that the image of me is squished and when you rollover the social media icons, the tooltip is a bit wonky. Is this because I am using pixels as my measuring system?

    # May 1, 2013 at 10:30 am

    Change of plans. I took out box-sizing and the 10 pixel margin. Now, what I would like to do is set nine different colors and apply a separate color to each blog post. I know this can be done with :nth-child, I am just not sure how to implement it. Like, every ninth child, apply this particular color. That way you don’t have two posts running up against each other with the same color. I would also like to add images and have this effect so that when you roll over the featured image, the text from the blog post appears. Any and all help with this will be greatly appreciated!

    # May 1, 2013 at 10:32 am

    http://css-tricks.com/how-nth-child-works/

    As for your second thought, you will probably need JS/JQ. The effect you linked requires fixed pixel values and positioning.

    http://codepen.io/mintertweed/pen/qgbJr

    I would assume that your posts will not be of equal height….although how that would interact with Masonry (assuming that’s still a requirement), I have no idea.

    # May 1, 2013 at 10:51 am

    Okay, using :nth-child may be problematic. For example:

    #linky .boxy:nth-child(4n) {
    background-color: #123456;
    }

    This will make every fourth child (4, 8, 12, 16, et cetera) a dark blue. But if I then say:

    #linky .boxy:nth-child(3n) {
    background-color: #654321;
    }

    This will make every third child (3, 6, 9, 12, 15, et cetera) a dark brown. See my problem? They both contain the number “12.” Is there any way to get around assigning two separate colors to a post?

    And, nope. All my posts will be of varying sizes. A good reference for what I am trying to do is Pinterest. I just recently discovered that their layout is most likely Masonry. And yet, they don’t have the rollover effect I’m looking for. Is there anyone on these boards you could point me to for JavaScript or jQuery guidance? Thank you thus far!

    Edit: Hmm, apparently when you list all the nth-childs out in a row, the most recent nth-child overwrites the previous one, because it is displaying as I want it to, here.

    # May 1, 2013 at 11:31 am

    I really have no idea what you’re trying to accomplish now. You should read about box-sizing before just removing it.

Viewing 13 posts - 16 through 28 (of 28 total)

You must be logged in to reply to this topic.

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