Featured Image CSS Adjustment

• 

  tiffaniross · Member · Jul 8, 2015 at 6:06 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am new to CSS. I’ve been messing with the CSS below to adjust my featured image. Currently, the image looks stretched out horizontally when the browser is in full screen. How do I keep the current size & margins for the image but make sure it doesn’t get stretched out?

  Thanks!

  .hero.with-featured-image {
  position: relative;
  margin-left: 220px;
  margin-right: 220px;
  margin-top: -10px;
  background-color: #fff;
  background-size: 100% 100%;
  border-bottom: 0;
  }

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

• 

  thesacredpath · Member · Jul 8, 2015 at 7:30 pm

  • Copy link

  Hi, replace what you have with the following and see what you think.

  .hero.with-featured-image {
      height: auto;
      margin-left: auto;
      margin-right: auto;
      max-width: 1000px;
      background-size: contain;
  }

• 

  tiffaniross · Member · Jul 8, 2015 at 7:56 pm

  • Copy link

  Thank you! That worked perfectly

  I have another question. regarding image sizing. Now the featured image size readjusts to the browser size, but the three images below (about, blog, services provided) don’t. Is there a way to change that so it resizes in proportion to the featured image?

  Thanks!!

• 

  thesacredpath · Member · Jul 8, 2015 at 10:10 pm

  • Copy link

  Great, glad that got you where you wanted to be with the header image.

  On the images below the header, I would not suggest tweaking those. On the header image it was relatively easy to do, but tweaking those would likely cause issues with the responsive design of Libre when viewed on a tablet or phone. I would suggest setting the max-width in .hero.with-featured-image to 1100px instead of 1000px, which aligns the header image with the three boxes below. There is a bit of misalignment below 1230px screen/window width, but it isn’t too bad.

• 

  tiffaniross · Member · Jul 10, 2015 at 12:36 pm

  • Copy link

  Thank you! That looks much better

• 

  thesacredpath · Member · Jul 10, 2015 at 4:40 pm

  • Copy link

  You are welcome.