Featured images

• 

  skm27 · Member · May 24, 2015 at 8:48 pm

  • Copy link
  • Add topic to favorites

  Hi

  Can someone please help me with the code for the following:

  I have the featured image set at 100%. This is controlling the image on the home page and also in the blog page. I would like to be able to have the image on the blog pages (eg travel with me) smaller – perhaps even thumbnail on LHS and content on RHS of thumbnail.

  If I change the 100% it alters both the home page and the post page.

  thanks
  Kerri

  http://www.beerandcroissants.com

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

• 

  staff-jeanpierreac · Staff · May 25, 2015 at 6:37 am

  • Copy link

  Hi.

  Let’s try. Right now you have 3 fractions of your articles in categories pages: featured pic, title or header and summary. Pic is 100% width, as you say, and then in new line, you have title (30%, floated to the left) and summary, floated to the right.

  You can customize .featured-image to be floated to the left, 30% width and I recommend you to add a margin to the right to avoid overlap articles title. I would let the title as it is, and then I would adapt the summary to be floated to the right, with a 3% margin to the left. In addition to that I would use the whole width, that means (100% – 3% margin-right – 3% margin-left -30% featured image -30% title)= 34% width.

  So this code should do the trick:

  . category article .featured-image {
      float: left;
      width: 30%;
      margin-right: 3%;
  }
  
  . category article .entry-summary {
      float: right;
      padding-left: 0;
      margin-left: 3%;
      width: 34%;
  }

  Of course, try to modify those values to fit the layout you like.

  By the way. If you would like to change header/title width, you can use the following selector: (Take into account this will do nothing because 30% this is the current value).

  . category .entry-header {
      width: 30%;
  }

  I hope this helps you.

• 

  skm27 · Member · May 26, 2015 at 3:45 am

  • Copy link

  That is awesome. Thank you so much !

• 

  staff-jeanpierreac · Staff · May 26, 2015 at 4:35 am

  • Copy link

  You are welcome! :)