Reduce height of featured images on pages

• 

  jessdixonphotography · Member · May 28, 2017 at 2:32 pm

  • Copy link
  • Add topic to favorites

  I have set my images to a long thin image but when putting it into the featured image, it crops the image to it’s own dimensions.

  How can I reduce the height of the featured images so they fit?

  Thanks

  Site I need help with: https://jessdixonphoto.com

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

• 

  otpidusprime · Member · May 29, 2017 at 9:07 am

  • Copy link

  Hello @jessdixonphotography
  You can use this CSS to reduce the height of the featured image:

  .custom-header {
      object-fit: cover;    /*made the image fit to the height*/
      object-position: 0 80%;    /*changed position on y-axis to 80%*/
      height: 300px;    /*reduced height*/
  }

  Hope this helps 🙂

• 

  jessdixonphotography · Member · May 29, 2017 at 4:29 pm

  • Copy link

  Hi,

  Thanks but that didn’t work, it didn’t accept the object-fit: cover; and object-position: 0 80%;

  Changing the height on the .custom-header { part doesn’t seem to be affecting anything either.

  I am using Creative Portfolio theme.

• 

  jessdixonphotography · Member · May 29, 2017 at 4:30 pm

  • Copy link

  Hi,

  Thanks but that didn’t work, it didn’t accept the object-fit: cover; and object-position: 0 80%;

  Changing the height on the .custom-header { part doesn’t seem to be affecting anything either.

  I am using Creative Portfolio theme.

• 

  timethief · Member · May 29, 2017 at 5:24 pm

  • Copy link

  I am using Creative Portfolio theme.

  http://naturallynomadic.blog/ is wearing the Karuna theme https://wordpress.com/theme/karuna/

  All CSS editing is theme specific editing.

  What is the URL of the site in question?

• 

  jessdixonphotography · Member · May 29, 2017 at 5:26 pm

  • Copy link

  I don’t know why it’s put that in my first question, the site I am working on is https://jessdixonphoto.com

• 

  timethief · Member · May 29, 2017 at 5:29 pm

  • Copy link

  re: jessdixonphoto.com
  Please be sure you are logged in under the exact same username account that registered the site and purchased the upgrade that provides CSS editing capability for it.

  If you are not logged in under the correct WordPress.COM username account then clear your browser cache https://en.support.wordpress.com/browser-issues/#clearing-your-browser-cache and cookies https://en.support.wordpress.com/browser-issues/#clearing-wordpress-com-cookies prior to logging into another account

• 

  jessdixonphotography · Member · May 29, 2017 at 5:30 pm

  • Copy link

  I am, I just have two sites.

• 

  timethief · Member · May 29, 2017 at 5:31 pm

  • Copy link

  Good, then all you have to do is wait patiently for Staff assistance which is provided for all CSS editing questions. :)

• 

  thesacredpath · Member · May 30, 2017 at 1:33 am

  • Copy link

  Hi @jessdixonphotography, are you talking about the featured images in the slider on your main page, or the featured images that appear on your pages, such as Events, or both?

• 

  thesacredpath · Member · May 30, 2017 at 1:39 am

  • Copy link

  Just as a starter, for pages other than the home page, you can add this to your custom CSS and see what you think.

  #page-header.cover {
  	height: 100% !important;
  	min-height: 380px;
  	max-height: 380px;
  }

• 

  jessdixonphotography · Member · May 30, 2017 at 10:00 am

  • Copy link

  @thesacredpath It’s done it! Great thanks so much. I was looking to do the same with the front page slider also, any ideas?

  Thanks

• 

  thesacredpath · Member · May 31, 2017 at 3:54 am

  • Copy link

  Well, for shortening the slider on the main page, the following seems to work fine in my testing, but make sure and view at various window widths and view in a phone and tablet just to verify and let me know if you see any issues.

  .home .fc-contain, .fc-holder {
  	height: 46.25vw !important;
  }
  .home #previous-slide-controller, .home #next-slide-controller {
  	top: 40% !important;
  }

• 

  jessdixonphotography · Member · May 31, 2017 at 2:19 pm

  • Copy link

  That seems to have worked, thanks so much for your help :)

• 

  thesacredpath · Member · May 31, 2017 at 11:25 pm

  • Copy link

  You are welcome.