How to turn off image zoom in header images?
-
I’m trying to turn off (if possible) the image zoom that occurs with the header image in the photo blog theme when you click into individual posts. I would prefer if the header image was full page but didn’t zoom in as I find it cuts off a lot of the image. What CSS do I need to make this possible?
The blog I need help with is bourbonpaddy.wordpress.com
The blog I need help with is: (visible only to logged in users)
-
If you have the Premium or Business upgrade http://wordpress.com/plans you can opt to apply custom CSS to a WordPress.com theme.
Note 1: If you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.
Note 2: You can also post there prior to purchasing an upgrade to get an answer to whether or not what you want to do can be accomplished via CSS editing.
Read also please: https://en.support.wordpress.com/custom-design/#frequently-asked-questions Does Customize let me edit HTML?
-
Hi @bourbonpaddy,
I did not experience any image zoom in when i visited your website .I hovered over your header image and it didn’t zoom in, moreover all the header images were full width too.
The Photo Blog theme documentation also doesn’t talk about any image zoom in
https://wordpress.com/theme/photo-blogCould you please provide more details regarding the issue?
Additional info:
Photo Blog is a premium theme and if you face any issues related to theme in future, WordPress.com forums provides full access to dedicated support from the theme authors themselves, where you may also find customization tips for your theme.Thank you.
-
Hi @iamrishaan
My issue is that when you’re on the front page (where the featured images are in grid view) it displays the full images with the titles over the image, but when you click into an individual post the featured image now appears magnified (behind the title of the post). Does this make sense? It might be that in making my featured images full width it seems to cut off the top and bottom of the images which means a lot of the details in the images themselves are lost. That’s what I’m looking to prevent if possible.
Thank you.
-
Hi @bourbonpaddy,
It’s actually a theme feature, that the image gets cropped to look good across all devices. Your feature image is not getting cropped when I view your blog in my mobile.
Custom feature images that work best in this type of theme are more flexible so they can handle some sort of cropping.
Having said that, if you prefer to not having your feature image cropped then as @timethief mentioned Custom CSS will be the only viable option which requires Premium or Business upgrade
Please follow the steps listed by @timethief regarding the same.
If you have the required upgrade you can use this link https://en.forums.wordpress.com/forum/css-customization#postform so you can create a thread that will appear in the CSS Forum where you will get the help you need with CSS editing.
Hope that helps.
Thank you.
-
@bourbonpaddy, the single post pages have a certain size of container for the image, and to make sure that area is covered by the image in both directions, it is set to “cover” the entire area. You can give the following a try, which will make it better on desktop, but it will not make it better when the screen/window width gets less than about 568px in width.
@media screen and (min-width: 768px) { .hero-area { min-height: 231px !important; height: 631px !important; } }
- The topic ‘How to turn off image zoom in header images?’ is closed to new replies.