Featured Photos

mgd2011 · Member · Sep 4, 2017 at 6:48 pm
Copy link

Add topic to favorites
Hello,

I’ve been having an issue with my featured photos on posts that happiness engineers haven’t been able to assist me with.

Our featured photos are all the same size on any scroll pages, due to custom CSS that we’ve inserted. Unfortunately, on the mobile version of our site, when we scroll, the photos are only the same size when posts pop up under a search term. They are the same size when under category pages, but, they are stretched and pixelated. This does not happen when scrolling through posts after entering a search term — in fact, they look great when on this screen.

Is there a way to fix this so the featured photos are all the same size and not pixelated no matter how they are looked for on the mobile version of our site?

Thanks!

The blog I need help with is: (visible only to logged in users)
kennythenerd · Member · Sep 6, 2017 at 12:19 pm
Copy link
Hi,

It took some time to figure out what is the issue, after some tinkering around, I figure that the image does not fit the container.

Can you give below code a try?

Change the class .blog-post-thumb to reflex the code below
```
.blog-post-thumb {
	font-size: 0;
    line-height: 0;
    text-align: center;
	margin-bottom: -125px;
    margin-top: -150px;
	}
```
add the following CSS class below the above class
```
.blog-post-thumb img {
	object-fit: contain;
	}
```
Hope this helps you to resolve the issue :)
mgd2011 · Member · Sep 6, 2017 at 2:46 pm
Copy link
Hello,

I added the above code and the desktop formatting didn’t work. All of the featured photos on the front page ran into each other and covered the text.
kennythenerd · Member · Sep 6, 2017 at 2:55 pm
Copy link
Hi,

Opss, sorry my mistakes.

Just add the following code will resolve your issue. The code below just changes the picture to fit the container.
```
.blog-post-thumb img {
	object-fit: contain;
}
```
Can you see by just adding the code above only will resolve your issue? :)
mgd2011 · Member · Sep 10, 2017 at 10:08 pm
Copy link
Kenny,

I used the above code but on desktop, the thumbnails were not all the same size — just on mobile. They need to be the same size across the board.
graphitedgeau · Member · Sep 12, 2017 at 1:23 am
Copy link
Hi,
On inspecting the code on your page for the mobile view, I saw that for your feature image you had the following code:
```
body.home .blog-post-thumb a, body.home .blog-post-thumb img {
    width: 550px !important;
    height: 300px !important;
}
.blog-post-thumb a, .blog-post-thumb img {
    display: inline-block;
    max-width: 100%;
}
```
for one of your images that are stretched. This is in a blog-post-thumb class section of the page.
the other images that you have for posts are in a class section called blog-post-alt-thumb. this has the following code for it:
```
.blog-post-alt-thumb a, .blog-post-alt-thumb img {
    display: block;
}
.blog-post-alt-thumb a, .blog-post-alt-thumb img {
    display: block;
}
img {
    height: auto;
    max-width: 100%;
}
```
a few notes: when you use !important it will override any style on that tag. if you take the height property out the images will not be a stretched in the blog-post-thumb class section. Also, the images in the blog-post-alt-thumb class section are 600px in width which is set in the image tag. where as the other images are much larger.
I would suggest that:
1. you change your custom style sheet to have no height property in the body.home .blog-post-thumb a, body.home .blog-post-thumb img section of CSS, and make the width 600px.
2. It would also be a good idea to use images that are of the same proportional size so that you do not have the problem going forward. I.e. make sure that the width to height ratio is 2 to 1. That is 600 wide by 300 high, or 400 wide by 200 high.
  Hope this helps and if you need any other help do not hesitate to contact me.
mgd2011 · Member · Sep 12, 2017 at 10:02 pm
Copy link
Hi graphitedgeau,

Thanks so much for your detailed reply! As I’m not a CSS expert, the existing CSS has been supplied to me through WordPress happiness engineers. As such, I’m not entirely following your explanation — please forgive my ignorance! If there’s a way that it can be explained in step-by-step terms, that would be much appreciated!

Thanks so much for your help!
thesacredpath · Member · Sep 13, 2017 at 6:40 pm
Copy link
@, let’s start here. In your custom CSS, change the “height” to “max-height” on the following two CSS rules.
```
body.archive .blog-post-thumb a,
body.archive .blog-post-thumb img {
	width: 750px !important;
	max-height: 550px !important;
}

body.home .blog-post-thumb a,
body.home .blog-post-thumb img {
	width: 550px !important;
	max-height: 300px !important;
}
```
Let’s start with the above and then work from there. The above change should take care of the issues on your categories pages.

No items found.