Change an elements location under media screen

  • Unknown's avatar
    chasingthenichols · Member ·

    When viewing the blog posts under the media screen there is a “leave a comment” button. Not sure whey it’s designed like this, but it is at the very top of the post right after the Title. I’m hoping to move it to the bottom of the post. Any help would be great! Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    carladoria · Member ·

    Hi,
    There’s no easy way to do this. The following CSS can change the location of the button:

    .format-standard .comments-link, .type-page .comments-link {
    top: 850px;
    }
    HOWEVER, the size of the summary view of your blog posts depends on each post’s image, description, etc. So if I apply the rule above, it works for the first post on your home page, but it doesn’t work for the following ones since 850px might be too much for the second post and so on.
    This might be targeted per post, but you might want to make sure you either 1) always update this CSS for new home page posts, or 2) you maintain the same posts on your home page all the time.

    Maybe another community member can give a better solution too :)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @chasingthenichols, due to the way the comments link moves below the title at screen/window widths narrower than 960px, and given the issue with keeping that link at the bottom at 959px and narrower, I’ve used a Media Query to limit this change to screens/window 960px and wider. Add the following to the very bottom of your custom CSS and see what you think. 

    @media screen and (min-width: 960px) {
	.blog .entry-header {
		position: static;
	}
	.blog .hentry {
		position: relative;
	}
	.blog .format-standard .comments-link {
		top: auto;
		bottom: 60px;
	}
}
  • The topic ‘Change an elements location under media screen’ is closed to new replies.