Featured Image Sizing Issues

Support
#1

Hello!
I’m trying to set my featured images in posts to a fixed size. Normally Wordpress extends the image to make it cover the whole box of the post. I followed the instructions given in this thread https://theme.co/apex/forum/t/format-blog-post-feature-image/43227 , which solved the problem of the sizing, but…

The image is alright, but the border it is contained in is just horrible.
Any tips on how to make it fit, or better yet, disappear completely?

Featured Image Sizes
#2

Hello There,

Thanks for writing in!

To removed the borders in the featured image, please make use of this code:

.has-post-thumbnail .entry-featured {
    border: none;
    box-shadow: none;
}

We would loved to know if this has work for you. Thank you.

#3

Thank you, it worked!

I also want to center the image (it’s off to the right, see screen shot above). How do I do that?

Thanks!

#4

Hi There,

On the thread you linked above, the suggested code is

.entry-featured .entry-thumb {
    max-width: 50%;
    margin: 0 auto;
}

The margin: 0 auto; is to center the feature image, did you modify that? please set it back to 0 auto.

If this is not the case, please let us view the your site so we can take a closer look, currently it is under construction mode so we can not view it.

Thanks,

#5

No, I didn’t modify it. This is all the custom CSS I have:

.entry-featured .entry-thumb {
text-align: center;
background-color: transparent;
}
.entry-featured .entry-thumb img {
min-width: 800px;
}
.entry-featured .entry-thumb {
max-width: 50%;
margin: 0 auto;
}
.has-post-thumbnail .entry-featured {
border: none;
box-shadow: none;
}

Sent you the access in a private note.

PS. I think I found the problem - I removed the min-width: 800 and it is centered now.

#6

Glad you sorted things out, we are delighted to assist you with this.

Have a nice weekend,

#7

Thank you - and one more question :slight_smile:

I used min-width:800 because without specifying a minimum width, the images display really small (about 400px wide). But using a minimum width messes up responsiveness, i.e. with 800 specified as the minimum width the image doesn’t shrink to fit smaller screens.

Is there a way to use a minimum width (800 in my case) as the default when the page is viewed on desktop but allow it to shrink when viewed on a smaller screen? I guess I would have to use something else than min-width, right?

#8

Hi There,

You can remove that min-width and adjust the max-width:50%; instead.

.entry-featured .entry-thumb {
max-width: 50%;
margin: 0 auto;
}

That’s the rule that limits your featured image width, that means only 50% of the initial width. Since that is a max width, it lets your featured image decrease (responsive) on a smaller screen.

max-width

Cheers!

#9

Thanks - fixed!

By the way, the bypass on the “Under Construction” screen doesn’t seem to work for me. I tried in 2 different browsers, and the key icon to log in doesn’t show up, even though there is a bypass password set.

#10

Hi,

Yes, regarding about under construction password. There is an ongoing bug on that where the key icon (enter password) is not showing up.

Regretfully, it’s not fixed yet. You can always check the changelog page when we release an update to see if this bug had been fixed.

Thanks,

#12

OK, thanks.

#13

You’re welcome.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.