Changing the hieght of the featured image on front page

• 

  lulupix2 · Member · Dec 14, 2016 at 1:12 pm

  • Copy link
  • Add topic to favorites

  Can anyone help me with reducing the height of the featured image on my front page – I am using the Edin theme and my site is https://myfrenchtable.wordpress.com/

  I would think it would need reducing by about 50%. Basically what I want is that when someone clicks onto my site, you can see the image with the info blurb on it, but also see at least some of the columns underneath so that you immediately get a look at what the content is.

  Thanks

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

• 

  eallas · Member · Dec 14, 2016 at 2:21 pm

  • Copy link

  Hi lulupix2,

  A solution that can work for this is finding the following code:

  /* Content */
  	.hero.with-featured-image,
  	body[class*="front-page"] .hero {
  		padding: 180px 0;
  	}

  Change the padding from 180px 0; to 75px 0.

  The code should then look like this:

  /* Content */
  	.hero.with-featured-image,
  	body[class*="front-page"] .hero {
  		padding: 75px 0;
  	}

  Good luck!

• 

  lulupix2 · Member · Dec 14, 2016 at 4:05 pm

  • Copy link

  Thanks, but way beyond me – not sure what to do next – hope someone will be able to guide me through the process – anyone?

• 

  eallas · Member · Dec 14, 2016 at 6:46 pm

  • Copy link

  I apologize for the complexity of this issue. I may be able to assist you on next steps to complete this. I have a couple questions beforehand.

  Have you attempted to resize/crop the image so it takes up less space when uploading?

  Are you currently on a Premium or Business Plan?

  Thanks for your cooperation and patience!

• 

  lulupix2 · Member · Dec 14, 2016 at 7:36 pm

  • Copy link

  Hello

  Yes I am on Premium plan so I can use custom design.

  Yes I have tried to resize, but doesn’t seem to work. Basically if I go for just text without a featured image I still get this massive block of solid colour so when you load the front page all you see is the grey and not my text, so neither the feature image or plain text works at the moment. Hope that help

• 

  eallas · Member · Dec 14, 2016 at 7:41 pm

  • Copy link

  Could you try adding this to the custom design section?

  /* Content */
  	.hero.with-featured-image,
  	body[class*="front-page"] .hero {
  		padding: 75px 0; !important
  	}

• 

  lulupix2 · Member · Dec 14, 2016 at 7:58 pm

  • Copy link

  So do I literally just cut and paste it into the CSS box on the left

• 

  eallas · Member · Dec 14, 2016 at 8:00 pm

  • Copy link

  Yeah. Give it a try and let me know if it helps or if anything notable happens.

• 

  eallas · Member · Dec 14, 2016 at 8:01 pm

  • Copy link

  You go to Customize Site → Customize Design and paste!

• 

  lulupix2 · Member · Dec 14, 2016 at 8:02 pm

  • Copy link

  ok, will do but I have to go out now so will get back to it tomorrow. Thanks for your help and I will let you know

• 

  eallas · Member · Dec 14, 2016 at 8:03 pm

  • Copy link

  Sounds good. Have a great day until then!