Adapting the size of Goran Theme's front page image

• 

  d4vidclaude · Member · Sep 23, 2014 at 7:41 pm

  • Copy link
  • Add topic to favorites

  Hi! I would like my front page image (right now, a hot dog) to take up more space (I’m using Goran theme), and my caption text to be smaller. I’m not sure how to implement CSS to change this, can anyone help? My blog is here: futureblast.co

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

• 

  gracejiyoung · Member · Sep 24, 2014 at 7:46 pm

  • Copy link

  Hi David,

  Please note that the Goran theme is responsive so the header image will change depending on your display size. It will increase to 1230 px wide.

  If you want to change the size of the caption (*Personalize) you can do that by adding some CSS. Please go to Appearance > Customize > CSS in your Dashboard and add this:

  h1.page-title {
  	font-size: 11px;
  }

  You can change the number of pixels to whatever you want.

  Let me know if you have any questions with this!

• 

  d4vidclaude · Member · Sep 24, 2014 at 8:12 pm

  • Copy link

  Hi Grace!

  Font size is okay, but what I’m looking for is lowering the bottom margin of the hot-dog image so it takes more space. For example, if you look at the responsive phone layout, you’ll see how too little of the image is showing. I would like to widen that. Thanks!

• 

  gracejiyoung · Member · Sep 24, 2014 at 8:45 pm

  • Copy link

  Hi David!

  Sure! Try adding this to your CSS:

  @media screen and (min-width: 768px) {
  	body.hero-image .hero, body[class*="front-page"] .hero {
  		padding: 150px 0;
  	}
  }
  
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 568px) {
  	body.hero-image .hero, body[class*="front-page"] .hero {
  		padding: 150px 0;
  	}
  }

  That should increase the image on mobile and tablet devices! Feel free to reach out if you have any questions!

• 

  d4vidclaude · Member · Sep 26, 2014 at 7:09 pm

  • Copy link

  Thank you Grace! This works perfectly. And what if I want to do the same thing, but for regular computer browsers?

• 

  gracejiyoung · Member · Sep 26, 2014 at 7:30 pm

  • Copy link

  Hi David,

  You can change that with this:

  div.hero.without-featured-image {
  	padding: 500px 0;
  }

  You can change the number 500 to fit whatever you want.

  Cheers!

• 

  d4vidclaude · Member · Sep 26, 2014 at 8:07 pm

  • Copy link

  Your help is greatly appreciated. Thanks again.

• 

  gracejiyoung · Member · Sep 26, 2014 at 8:24 pm

  • Copy link

  You’re very welcome!