Resizing Featured Images for Rockets

Support
#1

I did reduce the pixel size of the images on this page to reduce or speed up the loading time. The problem I am having is that most images (jpegs) are taller than wider when working with Rocket images. It appears that the nose cone and tails of the rocket images are chopped off in the “Featured Images” and of course on the horizontal scrolling area at the very top of the page.
When I click on the title or Featured Image it does expand the image to full size showing the entire jpeg.
How can I make the Featured Image taller and or wider so that the entire image shows with the entire rocket in the Featured image.
Here is my test site… Https://r7rockets.com

#2

Hello There,

Thanks for writing in! The featured images were used as a background image in the featured image area. It has been set the size to cover the whole area which is why the nose and tail of the rocket gets cut off. To resolve this, we need to contain the images. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.entry-featured a.entry-thumb {
    background-size: contain;
}

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

#3

I inserted that CSS code in the correct place and no change took place?

#4

Here is all my CSS coding. I usually make 2 jpegs. One for the Featured image at 400pix and the other 900pix for the main image. I inserted the CSS code so I could place each of those 2 jpegs individually. See the attached.

#5

Here is the CSS coding so that I can have 2 jpegs. One for Featured image and one for full image.

#6

Hello There,

The code did not work because there was a broken class above it. The resulted out is:

.h-landma.entry-featured a.entry-thumb{background-size:contain;}


Remove the broken class and make sure that you only add:

.entry-featured a.entry-thumb {
    background-size: contain;
}

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

#7

That worked but the images at the very top of the site have the same problem. They cut off the nose and tail of the rockets. Is there anyway to make the area bigger for the featured image cause the images look a little small?
Thanks for your help.

#8

Hi There,

That’s the post carousel images, to change the image size for post carousel also. Please update the previous CSS to this:

.entry-featured a.entry-thumb,
.x-post-carousel.unstyled .entry-cover {
    background-size: contain;
}

Hope it helps :slight_smile:

#9

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