Fixing size of featured images in home/archive page

• 

  sreejithvme · Member · Oct 7, 2015 at 4:22 am

  • Copy link
  • Add topic to favorites

  Hi,

  I would like to know if the default size of the featured images in home/archive image can be changed. I am planning to use “Cerauno” theme. Currently the dimensions are 900×300. I would like to increase it to 900×500.

  Thanks in advance for the help :-)

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

• 

  ehtis · Staff · Oct 7, 2015 at 12:26 pm

  • Copy link

  Hi there,

  The width of the featured images can be changed, but it might distort the aspect ratio of those images. Often when you only change one dimension, it can sort of “squeeze” the image.

  But yes, it can absolutely be done! :)

  Here’s the code to achieve it on Cerauno theme:

  .home .featured-image img, .archive .featured-image img {
      height: 500px;
  }

• 

  sreejithvme · Member · Oct 8, 2015 at 4:38 am

  • Copy link

  Thanks for looking into this Ehtisham.

  Yes, now the image appears squeezed like what you have said.
  I am wondering if the w and h defined in this url could be changed using CSS?

  “>null

  https://ceraunodemo.wordpress.com/

• 

  sreejithvme · Member · Oct 8, 2015 at 4:39 am

  • Copy link

  I am sorry, here is the url for featured image in cerauno theme
  <img width=”900″ height=”300″ src=”https://ceraunodemo.files.wordpress.com/2015/04/picjumbo-com_img_0992.jpg?w=900&h=300&crop=1″ class=”attachment-cerauno-home wp-post-image” alt=”picjumbo.com_IMG_0992″>

• 

  ehtis · Staff · Oct 8, 2015 at 10:06 pm

  • Copy link

  Yes, the code I gave can actually override its height and width. However, you shouldn’t increase the width further because it will then hide one of the widget sidebars.

  There’s one way to only slightly increase the width. It’ll move your content area a bit left, and also bring the left widget area closer to the content area. Here it is:

  /* This changes image height/width */
  
  .featured-image img {
      height: 400px;
      width: 100%;
  }
  
  /* The following adjusts content area width */
  .site-main {
      float: left;
      margin-right: -25px;
      margin-left: -20px;
      width: 61.5%;
  }