Dyad 2 – Featured Image width on posts

  • Unknown's avatar
    edchef1 · Member ·

    Hi. I’ve been trying to change the width of featured images on blog posts. I have tried out some of the CSS provided in post #2632327 in this thread, which has only partially worked.

    The problem is that one component, which I believe to be the .entry-header, does not change as the rest does, even though it appears to be listed within the code. I wondered if anyone could help me to adjust the code so that that element changes as well?

    Thank you in advance!

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

  • Unknown's avatar
    slantedplanet · Member ·

    Hello Ed!

    The other post you reference is about adjusting the column widths in the single post view, so I assumed that is your goal in seeking to adjust the size of the featured image.

    Here is where I landed with code to change the column widths from 50-50 to 40-60, and adjusting the width of the featured image along the way:

    
@media only screen and (min-width: 1400px) {

 /* width of second column with post copy */
.is-singular:not(.home) .site-inner {
    width: 60%;
   }

 /* width of post copy in the second column */
.has-post-thumbnail.is-singular .entry-inner {
    max-width: 85%;
	}
   
 /* width of featured image in the first column */
.is-singular .entry-media {
    width: 40%;
   }
   

/* width of post title in the first column */
.has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index):not(.woocommerce-page) .entry-header {
    width: 40%;
   } 
}

    The text width setting (85%) is purely subjective, just based on what looked good to my eye with the 40-60 column widths.

    I set the media query at 1400px because there is other styling for the post title that happens at that breakpoint.

    Let us know if this helps you get the look you wanted.

    FYI: If you are on a WordPress.com plan that allows for CSS customization, you also have access to live support chat. Staff frequently recommends live support chat as a faster alternative to posting in the support forums.

  • Unknown's avatar
    edchef1 · Member ·

    Hi, drizzleblocks. That is absolutely perfect. Thank you very much!

    Thanks as well for the tip about live support. I’ve used them for tech issues, but I didn’t realise they were available for cosmetic support as well.

  • The topic ‘Dyad 2 – Featured Image width on posts’ is closed to new replies.