Different style on first post

  • moiety

    (@moiety)


    10 years, 5 months ago

    Hi,

    I’ve been trying to make the first post on every page to be different from the rest. I’m using a grid based theme, with two columns. I tried doing this is css with:

    .post:nth-of-type(odd):first-child{
    width:100%;
    height:100px;
    }
    .post:nth-of-type(even):last-child{
    width:100%;
    height:100px;
    }

    However, when I do this the whole design gets screwed up. There’s no space between the posts, the images suddenly aren’t the same height and so on. Even on single posts the comment section gets pushed up so that it overlaps the text.

    The strange thing though, is that when I use the same method on the last post it works perfectly.

    Can anyone help me with a simple solution to this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Bernhard

    (@bhdzllr)

    10 years, 5 months ago

    Hello moiety,
    do you have a link to your site?
    You set the height of all “.post” to 100px, maybe you try “min-height: 100px;”, to give posts more space if needed.

    Thread Starter moiety

    (@moiety)

    10 years, 5 months ago

    I’m currently working with MAMP, so it’s only locally on my computer. I am however using the simple melody theme and how done very little changing with my child theme. Only some colors and font styles as of yet.

    https://ww.wp.xz.cn/themes/simple-melody/

    Bernhard

    (@bhdzllr)

    10 years, 5 months ago

    Hello moiety,

    here is the problem:
    Your CSS has following code:

    .blog .hentry:nth-of-type(2n),
.archive .hentry:nth-of-type(2n),
.site-main-home .hentry:nth-of-type(2n) {
    margin-right: 0;
}

    Thus, the right margin of each second element (the element on the right) is changed.
    But if you change the width of your first element to 100 %, the code above will apply on the elements on the left.

    You can do this:

    /* Change your first post */
.post:first-child {
	width: 99.5%;
}

/* Overwritte original style */
.blog .hentry:nth-of-type(2n) {
	margin-right: 2%;
}

/* Overwritte original style */
.blog .hentry:nth-of-type(2n+1) {
	margin-right: 0;
}

    Note: You overwrite the style for your whole website, i do not know if it breaks stuff on other pages.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Different style on first post’ is closed to new replies.