Changing the hieght of the featured image on front page

  • Unknown's avatar

    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)

  • Unknown's avatar

    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!

  • Unknown's avatar

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

  • Unknown's avatar

    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!

  • Unknown's avatar

    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

  • Unknown's avatar

    Could you try adding this to the custom design section?

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

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

  • Unknown's avatar

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

  • Unknown's avatar

    You go to Customize Site → Customize Design and paste!

  • Unknown's avatar

    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

  • Unknown's avatar

    Sounds good. Have a great day until then!

  • The topic ‘Changing the hieght of the featured image on front page’ is closed to new replies.