[Resolved] Feature Image Not Fully Responsive

[Tobias]

Hi, I have a problem on the main page of my blog: the Feature image is not fully responsive and starts resizing too late when making the browser window smaller. Please see the behavior here: http://ceiton.com/blog/en/
Basically the Desktop CSS Viewport doesn’t scale the picture – the Mobile Viewport does it correctly.
Is there a way to fix it ASAP? Thx!

[Tobias]

Okay, I didn’t want to wait as we go live with our blog on Monday. So a quick fix was applied by adding “page-header-post-image” to the surrounding DIVs Class tag in blog/wp-content/plugins/gp-premium/addons/generate-blog/inc/functions.php line 93. Or simply search my above mentioned blogs main page HTML code, and search for “tobi temp fix”. However, a proper fix would be very much appreciated. Thanks!

p.s.
Just for re-production: the problem occurs only if your set the Feature image on the right hand side widget (called Feature Image) while editing a post. If you set the image in the larger area just below the content editing area called “Page Header” the problem does not exist.
However this is no valid workaround as the flag called “Add to blog excerpt” in this area does not work correctly, so the picture is not used when Sharing the post.

[Tom]

Hmm weird – all images should be responsive.

Are you using the “Photon” module in Jetpack? It has worked weirdly with our resizer (which is removed in the next version).

[Tobias]

Thx Tom for the response on your weekend! Its not urgent anymore due to my temp fix.

But no, not using Photon from Jetpack.

[Tom]

Weird, I’ll have to see if anyone else reports the same issue.

[Tobias]

Hi Tom, Why to bother other customers with the same bug? You can easily reproduce the behavior by yourself with my description above. Or even easier:
1. go to http://ceiton.com/blog/en/
2. press F12 to open your DOM explorer
3. use the selection tool and select a feature image
4. remove in the surrounding DIV in the CLASS tag the text “page-header-post-image” (which is a property from one of your other features, Header stuff I guess) which I have added manually
5. now resize the original Browser windows and see the false behavior
Thx

[Tom]

Hi Tobias,

This is happening because you have the images set to float left.

Floating images ignore their containers, so it won’t stay confined inside of it.

In this case, you’ll want to set the post image to center aligned, and this will be fixed.

Let me know 🙂

[Tobias]

Thx Tom, that does work! So shouldn’t be the value set to ‘center’ as default? Not sure where the value comes from originally.

As said before, using your “Pager Header” feature did fix the problem as well. However, when checking the box for using the image as feature image, the image is not used correctly for Sharing. So you might want to have a look at this issue as well. Not a problem for us as we use the WordPress dialog.

Best regards, nice theme 🙂

[Tom]

The default value is definitely “center”.

I’ll take a look at the page header image 🙂

Thanks!

[Author]

Posts