Sequential: Featured Image

  • Unknown's avatar
    hlindskold · Member ·

    I am trying to adjust the featured image size so that it’s the same width as the body of text in a blog post. As of now, It hangs over the right and left edges. The main container for posts is 560px, from what I can tell, and I would like the featured image to be that width, and also be centered over the body of the post (both on the main page of the blog and within the posts themselves).

    I do have the ability to edit the css, and I have tried a bunch of things to no avail (I know I’m missing something, but I can’t figure out what it is). Any help would be greatly appreciated!

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

  • Unknown's avatar
    hlindskold · Member ·

    And while we’re at it, I’d like to take out the right margin of the sidebar container, too, so that the widgets line up with the right side of the header image, as well.

    I just find it odd that everything in the header is narrower than the body of the blog.

    So I either need to expand the header image and menu, or I need to shrink the margins in the body of the blog.

    I hope all of this makes sense.

  • kokkieh · Staff ·

    Hi there,

    Just a note that you can get help with questions like these via live chat or email. There’s no need to post in the support forums where we might not see it immediately.

    The main container for posts is 560px, from what I can tell, and I would like the featured image to be that width, and also be centered over the body of the post

    The main container width actually varies depending on the screen size, and on my monitor is appearing as 700px, and if the screen goes below a different size it changes to 720px.

    So we’ll need different CSS rules for different screen sizes:

    /*
Reduce widht of and center featured image on front page and single posts
*/
@media screen and (min-width: 768px) {
	img.attachment-sequential-featured-image {
		max-width: 720px;
		margin: auto;
	}
}

@media screen and (min-width: 1020px) {
	img.attachment-sequential-featured-image {
		max-width: 560px;
		margin: auto;
	}
}

@media screen and (min-width: 1230px) {
	img.attachment-sequential-featured-image {
		max-width: 700px;
		margin: auto;
	}
}

a.post-thumbnail, div.post-thumbnail {
	background: none;
}

    This code covers the different breakpoints for desktop/laptop screens, and landscape view on a tablet. I haven’t made any changes to the mobile views, which are designed to display the image full-width.

    And while we’re at it, I’d like to take out the right margin of the sidebar container, too, so that the widgets line up with the right side of the header image, as well.

    This should do the trick:

    /*
Change sidebar width on desktop to be flush with right edge of header image
*/

@media screen and (min-width: 1020px) {
	.widget-area, .widget-area::before {
		margin-right: 0px;
		width: 280px;
	}
}

@media screen and (min-width: 1230px) {
	.widget-area, .widget-area::before {
		margin-right: 0px;
		width: 350px;
	}
}

    I just find it odd that everything in the header is narrower than the body of the blog.

    That is how the designer who made the theme designed it to look.

  • Unknown's avatar
    hlindskold · Member ·

    Thank you for your help! I know it’s the way the developer designed it to look…I just prefer things to line up. ;)

    Margin: auto is what I was missing. I didn’t think about the “auto” part. Thank you so much.

  • kokkieh · Staff ·

    Glad I could help :)

  • The topic ‘Sequential: Featured Image’ is closed to new replies.