How To Style Genesis Featured Image in Homepage

Like Tweet Pin it Share Share Email
StudioPress Sites

Want to change your default featured image style in Genesis Framework homepage like I have done? Then you are at the right place as in this short genesis tutorial I will share how I have changed the home page excerpt featured image in my Genesis News Pro theme.

By default the homepage featured image of a genesis child theme will be styled good only. But still if you want to change the style or fit the image 100% in your homepage featured image area, then this genesis tutorial will help you achieve the same.

Steps to Style Genesis Featured Image in Homepage

To do this change, you have to change the genesis CSS stylesheet as I am not going to use any free genesis plugin to achieve the same.

To find out which CSS elements are actually controlling the featured image area in home page, right click on the featured image of home page and the click on inspect element.

You will easily find that the a.alighleft img tag is having the CSS code which actually changed the design or style of my site’s featured image area. Here is the complete CSS code that you can paste in your theme to get the similar featured image area in homepage.

a.alignleft img, img.alignleft, .wp-caption.alignleft {
float: left;
display: block;
width: 300px;
height: 200px;
padding: 0.667em!important;
background-color: #EEE;
border: 1px solid #CCC;
margin: 0 10px 24px 0;
margin: 0 1rem 2.4rem 0;
}

Now change the featured image width & height, padding, color scheme, margin etc as per your need.

If you are expert in CSS coding then you can easily achieve any kind of design and style you want for your genesis WordPress theme. Share your thoughts on this short genesis guide if you find it useful.

Rate this post