Need help to fix couple CSS issues

  • Hi!

    My test blog is here: BLOG

    I’m still trying to improve my blog look. But recently I found couple problems:

    1) I modified content.php so now each post title is above post thumbnail. On the main page it looks OK, but when I view my post then I see that post title is located too high. Simply you can’t see it and you can’t see category. What I need to do is to move title and category down when you view post (assuming post has thumbnail).

    2) My meta info below thumbnail can’t sit on a single line. I tried to align or float the “number of comments”, but now you can see that red comment pic jumped on the second line. What I need is to align comment & red picture so this info should be always aligned to right side of thumbnail.

    I highlighted both issues on my pic below:

    PIC

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

  • You have this in your child theme now. Change the margin to 24px auto 0; (or adjust to what you want.

    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    margin: 0px auto;
    max-width: 600px;
}

    the other issue is caused by your author info. On the home page it is display:none and everything fits on one line. You’ll probably have to play with the css on that to get things lined up properly.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    I just modified CSS and this code:

    #masthead {
   margin-bottom: 50px;
}

    The problem is that on main page there is a huge gap between blog title ( id “masthead”) and post title. But if you open a post then that same gap is much smaller. I don’t know how to fix that.

    I also added this code:

    .site-content .comments-link a {
   margin-left: 235px;
   margin-bottom: 33px;
}

    This moved “Comments link” a bit left, but still problem is not solved, because I need it to be aligned to the right side of thumbnail.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    Janet, sorry didn’t see your message. Let me try your suggestion.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    Janet, it helped. But on main page there is still gap.

    I just see that entry-header on main page is way below same entry-header inside post.

    Regarding Author – the thing is that I manually move “Comments-link” to the right. But I’d like to see it always right aligned to the right end. When I start play with that in CSS then that “red comments pic” always goes to the second line. I don’t know how to fix that. Simply I’d like to see Comments with that red pic always on the right side.

    to create css that only applies to the home page, use a body tag of .home and then the styles, i.e. .home .site-content whatever, whatever.

    hope that helps.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    The more I live the more I learn!

    Thank you!

    Now I see that I can use .home and .single to control post and post previews on main page.

    I’ll try to proceed this evening. Yesterday went to sleep too early! :))

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Need help to fix couple CSS issues’ is closed to new replies.