Help with Edin theme featured image
-
Hi everyone, the blog I need help with is: http://okikukaiuechiryuitalia.wordpress.com
I’m currently struggling with an issue concerning the featured image that I’ve assigned to my home page.
What I don’t understand is why the height of the image get cropped whenever I try to navigate my site on a mobile/iPad or when I simply shrink the browser’s window.
Given that I’m currently using what is supposed to be a responsive theme (Edin), I thought the image would have been responsive as well; like on these two other blogs, using the same theme as I am:
http://christcenteredstudentministry.com
http://combinearchitecture.com
In fact, if you try to reduce your browser’s window whilst browsing either one of them, you’ll notice that the issue won’t arise.I really hope, someone will be able to help me out with this problem.
Thank you very much for your kind consideration and please excuse my poor English!
Matteo
The blog I need help with is: (visible only to logged in users)
-
Hi.
Your site with this theme is definitely not responding well to browser size changes. Some effects I noticed:1. On a 12″ wid monitor with screen resolution 1024 X 768 pixels, the top of the header image is cropped off. This obscures the first word of the title, “OKIKUKAI.” Even worse, however, is that your custom does not display at this resolution.
2. One zoom click out displays your navigation menu above the title, but the image is still cropped, and the first word of the title is obscured by the menu.
3. After reset, one zoom click in produces a large white area above the header image that contains a three-bar tab which displays your custom menu. However, this time the entire first word of the title is covered, and the image is cropped more than in the other two cases described.
I’ve tagged the thread for Staff attention.
-
-
Good morning @musicdoc1 and thank you very much for taking your time on this matter.
I’m looking forward to hearing from a staff member and getting this issue fixed.
Matteo
-
Anyone??
I now managed to get access to the CSS, and I’ve also found out that the height of the featured image on the front page seems to be related to the amount of text.
However, my issue remains; how can I avoid my image getting cropped if I decide not to write any text on the front page?? -
@ okikukaiuechiryuitalia,
Staff will probably get to this issue eventually. In the mean time you might want to have a look at some other themes:http://theme.wordpress.com/. I have not seen this eclipsing of the header on another theme, and I’ve tested over 100 themes.
-
The Edin theme uses a “background-size” CSS rule for the header image like this:
background-size: cover;“The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.”
Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#Special_values.3A_.22contain.22_and_.22cover.22Basically, that means the image will get cut off depending on the width of the browser. That is how the CSS setting works. Because of that, the best type of image that will work as a header image in the Edin theme is one that does not contain text embedded in the image or maybe where the text in the image is limited to the center area. The theme will work best if you use the header image as a background and don’t hide the site title so it will show through.
There are ways to adjust the image to work differently using custom CSS if you’d like, but that takes some work and is a customization to how the theme itself was designed. If you’d like help with that or want to work through an example, please post a note in our CSS forums and an expert in CSS will help you: https://en.forums.wordpress.com/forum/css-customization
- The topic ‘Help with Edin theme featured image’ is closed to new replies.
WordPress.com Forums 