Featured image cut off

  • Unknown's avatar

    Hi.

    Can someone tell me the CSS rule I need to change to alter the viewing height of the featured image on each page for the SELA template? Each image is being cut off, an example of which you will see on this page (you can see their heads are cut off top and bottom):

    https://grayshottheritage.com/heritage-friends/become-a-friend/

    I realise that the image has been scaled to fit so I don’t so much mind if only the top of the image is shown to prevent it becoming too deep.

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    The featured image on the front page and on pages works best with images at least 1180 wide.
    Featured Images for posts should be at least 820 wide by 312.
    From https://wordpress.com/theme/sela

  • Unknown's avatar

    Hi timethief. All of my images are wider than 1180px. The depth of some of them I cannot dictate which is why I want to be able to increase the viewable area height via CSS if I can.

  • Unknown's avatar
  • Unknown's avatar

    Thanks for the input manuschwendener, but as this is a different theme it has different classes. I’ve tried all of the ones that I could find using the developer tools but all I seem able to do is stretch the image height. I’ll keep pugging away though to see if I can find the right css!

  • Unknown's avatar

    Hi @grayshottheritage, on your Become a Friend page, I’m not seeing the heads cut off right now. I checked a number of your pages and all looks good. Did you get this sorted out?

  • Unknown's avatar

    Hi @thesacredpath. I couldn’t do anything through the css so I just adjusted the dimensions of the images in photoshop. Can I ask, does this template not work in IE? It’s all over the place – my client has IE 8 and 11 and I’ve just checked it on IE 9 and the desktop menu is replaced by the responsive one and the text is full width?? It’s almost like it’s displaying it responsively for tablet but really poorly. At first I thought it was because of my CSS so I stripped it out but it was exactly the same?!

  • Unknown's avatar

    Hi, adjusting the dimensions and/or crop on your images is probably the best solution on the images. In general, the software will do a center crop for featured images from your uploads, so if you make sure the most important part is centered vertically and horizontally, and stay close to the 1180px width for the front page, and 820px width on posts, you should be fine.

    On the browser issue, although we try and make sure our themes are at least mostly compatible with older versions of IE, we officially only support IE11 and later. The mobile menu appearing in IE8 is normal. We use Media Queries to control when the full menu and touch device menu appear, and IE8 does not understand media queries. The same is true with the width adjustments, so IE8 and 9 will both show the mobile version with the sidebar at the bottom.

    In IE11 toggle compatibility mode on and off. It should be off for viewing the site using Sela. I see no problems when I view the site on IE11 in browserstack.com.

  • Unknown's avatar

    Yes I managed to talk to a support team person and they informed me that it was working their end. It was my work computer and the network was preventing it from displaying correctly. When I got home I tried it on my fiance’s PC laptop running IE 9 and it worked fine, so all is good but thanks for your input.

  • Unknown's avatar

    You are welcome. I’ve not run into the network firewall issue in a while, but thanks for letting me know so I can keep that in mind for future.

  • The topic ‘Featured image cut off’ is closed to new replies.