Need help? Check out our Support site, then


Header image/banner/featured image having its sides cropped

  1. On my home page (welcome tab) of my site I want a very wide, panoramic style image but it's being cropped on the sides when I try. The original image is 10,000 x 2,441px. At first I though it was probably just due to the huge size of the file so I tried again with a compressed version of 3,000 x 732px but it still does this.

    Here is the origional image file:
    http://i.imgur.com/lZ80HtX.jpg

    Here is my blog, and what I am talking about:
    http://www.benjaminweir.org

    And here is a photoshop version of what I'm trying to achieve:
    http://i.imgur.com/2bRuV52.png

    Any help would be greatly appreciated.

    The blog I need help with is benjaminweir.org.

  2. Hello! The problem is not your image but your theme. Add this code if you have the Custom CSS option that comes with having a WordPress.com Premium and Business plan.

    .site-content {
    padding: 0px;
    }

  3. This didnt work :( any other suggestions?

  4. Maybe I put it in wrong... I already have some custom CSS so do i just paste this in with a line gap between? This is what I have:

    .single .content-area, .page .content-area, .search .content-area {
    	float: none !important;
    	padding: 0 0 3.75em;
    	width: 70%;
    }
    
    .site-content {
    	padding: 0;
    }
  5. Hello! Try

    .site-content {
    padding: 0px !important;
    }

  6. Thank you, this has helped a little but its still cropping a fair amount off the sides, you can see what I am try to achieve here:

    http://i.imgur.com/2bRuV52.png

  7. Hi! I just checked it again. Try adding this code as well. Tell me if this works!

    .site-content {
    padding: 0px !important;
    max-width: 100%;
    }

  8. Unfortunately it appears to stay the same :(

  9. Have you tried using adding !important to the max-width?

    .site-content {
    padding: 0px !important;
    max-width: 100% !important;
    }

  10. Still cropping :(

    Here is the following that I sent to someone else for help too. It better shows the issue that occurring on two different monitor sizes:

    Here is what my home page looks like on two monitor sizes:
    1600 x 1200:
    http://i.imgur.com/QrHZf24.jpg

    2560 x 1440:
    http://i.imgur.com/ZeVkoaF.png

    Here is the original image file which is 10,000 x 2441px:
    http://i.imgur.com/lZ80HtX.jpg

    And here is what I'm trying to achieve (i made these two in photoshop to illustrate what im aiming for) on the same two screen resolutions I previously showed:
    1600 x 1200:
    http://i.imgur.com/2bRuV52.png

    2560 x 1440:
    http://i.imgur.com/byA7yq7.png

    As you can see in the first two screenshots (particularly the one of the larger screen) the header image is WAY too large and reduced in quality and I'm unable to find an answer anywhere on how to stop this happening. Its less of an issue on screens with a taller ratio, such as the second image (1600x1200) but none the less its still over the top and I'd really like to achieve what I showed in the 3rd and 4th image which are photoshopped.

  11. Thank you so much for the information!

    After doing some research I believe the issue is a theme specific problem. The theme's featured image size is set to 1200 wide by 635 high. This is why the image is getting cropped.

    Melody is a premium theme so they have their own forum.

    https://premium-themes.forums.wordpress.com/forum/melody

    I would suggest reposting your question there.

    Another option would to be resize your image to fit the dimensions. You could add white space above and below the image in photoshop to create a similar look.

    I hope this helps! If you have any additional questions feel free to ask. :)

  12. Thank you for your continued help! :)

  13. Hey there,

    I hope you don't mind me jumping in to help. The problem I see is that the image you're working with is already cropped by the theme. You can see that in its URL -- note the &crop=1 at the end?

    If you want to display an uncropped version of it, you'll need to hide the cropped one:

    .home .attachment-post-thumb {
     display: none;
    }

    Then add an uncropped version back in as a background image somewhere.

    I'm not sure whether you're using .intro-block for anything, but here it is fixed up with a background image in it:

    .home .intro-block {
        background-image: url(https://benjaminweirblog.files.wordpress.com/2017/04/twisted-glass-render-multi-and-sat-ultra-wide-jpeg.jpg?w=1800);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    	min-height: 7em;
    }

    You will need to test that on different screen widths and make sure it all looks good. One issue I noticed is that smaller screens lose the space between that block and the text below it. So you could add something like this:

    @media screen and (max-width: 959px) {
    	.home .intro-block {
    	margin-bottom: 2em;
    	}
    }

    Also note: with that CSS, you're still going to get cropped sides on small screens, but frankly, if you try to display the full-width image on a small screen, it's too "short" to see very well anyway.

    Hope that gives you a good start. :)

  14. Everything about this worked perfectly the first time, I didn't have to alter any of your CSS. Thank you so much for you help! :) Have a great day!

  15. WAIT hahah I take that back, its appears fine while in the CSS editing page but when I come out of editing mode the image is simply not there?!

  16. those are screenshots showing what i mean

  17. Ah, try heading to Customize > Theme Options > Intro text.

    Add some text, or this:

     

    Then save your changes.

  18. did you mean to put something in that box? :p

  19. I figured it out :) thanks

  20. Exactly. :) Cheers!

Topic Closed

This topic has been closed to new replies.

About this Topic