Jump to content


Photo

Full-Scren Featured Image


  • Please log in to reply
2 replies to this topic

#1 greatsun0

greatsun0

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 42 posts

Posted 16 March 2017 - 10:29 AM

HI Alex,

 

How can I make the featured image a bit bigger, like this one: https://markmanson.net/being-average

 

Currently I feel the default crop for featured image is too short, and my image does not display well: http://www.phattrien...uong-dan-tu-tu/

 

Appreciate your help :)



#2 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 16 March 2017 - 01:06 PM

Hey, I'm happy to help!

 

But first, I noticed something strange about your site... is there some kind of script that closes your site if it detects an Ad Blocker? Every time I load it in Chrome, your site immediately closes the tab.

 

Anyways, when it comes to changing the height of things like this I prefer to adjust the padding rather than setting a fixed height. So very simply, we can adjust the bottom and top padding evenly to add height to Featured image covers like so:

@media all and (min-width: 900px) {

	.header-wrap .featured-image-cover .block-quad {
		padding-bottom: 156px;
		padding-top: 156px;
	}

}

I also placed it in a media query to detect when the screen size is getting smaller so there isn't a huge gap in mobile.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#3 greatsun0

greatsun0

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 42 posts

Posted 16 March 2017 - 10:41 PM

Got it. Tks Alex.

 

Hmm it seems there is no problem on my Chrome and some other computers. I'll check that, tks for letting me know.

 

For the coolest effect I tried 200px padding. Would be awesome if the next Kolakube update has something similar to edit the image height without manual coding :D






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users