Featured Image adjust to device size

  • Author
    Posts
  • #2890038

    mojofabulous
    Member

    Currently my featured images cut off large portions of the image based on the users device screen size. To deal with this in my pages where I can use HTML I’ve been using the line:

    <img style="http://width:full;height:auto;" src="https://mojofabulous.files.wordpress.com/2017/02/img_13851.jpg" />

    Is there a way to setup the same functionality for my featured images in css? As it is I’ve simply been removing my featured images, which is non-ideal.

    Thanks!

    The blog I need help with is mojofabulous.com.

    #2890198

    Hello there!

    Dropping this code in your custom CSS area should do the trick:

    .hero.with-featured-image {
    	background-size: 100%;
    }
    
    @media screen and (max-width: 1230px) {
    	.hero.with-featured-image {
    		padding: 0px;
    		min-height: 414px;
    	}
    }
    
    @media screen and (max-width: 1020px) {
    	.hero.with-featured-image {
    		min-height: 312px;
    	}
    }
    
    @media screen and (max-width: 768px) {
    	.hero.with-featured-image {
    		min-height: 244px;
    	}
    }

    Now, once it gets to the smaller screen sizes it gets harder to resize everything so that it fits, you can carry on with the @media screen sections going smaller and smaller max-widths and adjusting the min-heights accordingly (If you don’t do this you’ll see red bars on the top and bottom of the image). Another solution to fix this so it looks a little cleaner without doing all of the work would be to change the last section of CSS above to this instead:

    @media screen and (max-width: 768px) {
    	.hero.with-featured-image {
    		min-height: 244px;
    background-color: #000;
    	}
    }

    This solution might also not work if you have different sized featured images, but should make it so that it generally doesn’t cut as much off.

    Let me know if that doesn’t work!
    Sage

The topic ‘Featured Image adjust to device size’ is closed to new replies.