• Hello Everyone,

    Can somebody help me out in reducing the size of featured image?? The current image dimension is 649*306 and due to this the title of post goes below. What i Want is to reduce the size to some 250 px so that the without scrolling the title of featured post also gets displayed.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter psushant577

    (@psushant577)

    Any update please …?

    Hi psushant577. You can reduce the featured image size using css:

    .flexslider .slides img {
      width: 250px;
      margin: 0;
    }

    But that alone won’t let the title move up because the title is positioned below the post meta data. However, you can reposition the title by moving it up and over within the parent container. It also needs to be resized to fit alongside the image:

    .featured .post-title {
      font-size: 28px;
      position: absolute;
      top: 0;
      left: 275px;
    }
    Thread Starter psushant577

    (@psushant577)

    Still not working. My site is https://knowledgeofindia.com/ and i want the featured image to be less than its exact height(not width). I checked on firebug and its dimension is set as 307px(height) and i want that to be like 250px.

    Try this:

    .featured img {
      width: auto;
      height: 250px;
    }
    Thread Starter psushant577

    (@psushant577)

    Hi Bdbrown,

    I tried the same code and though it reduced the height of image it also reduced the width. (you can see on the site, i have not removed your code). I checked by replacing featured image by another one but same issue. Also one more question as I am thinking to enable slider option, so the reduced image would work for all the image appearing in the featured post?

    Try this for your single featured image:

    .featured img {
      width: 100%;
      height: 250px;
    }

    This should work for the slider:

    .flexslider .slides img {
      width: 100%;
      height: 250px;
    }
    Thread Starter psushant577

    (@psushant577)

    Thanks for your help It worked and i really appreciate your help. Just one mere issue that i am facing and it is related to logo. When I am viewing the site on desktop every thing is fine including logo
    https://knowledgeofindia.com/wp-content/uploads/2015/05/desktop.png

    But as soon as I switch to mobile view of Tab or phone a gap gets created between the header background and the logo.
    https://knowledgeofindia.com/wp-content/uploads/2015/05/phone-view.png
    Could you please help me out here too?

    Thanks in Advance.

    Glad that worked. Since your other question is related to a different issue please start a new topic for that one. If you don’t need any further assistance with this topic please mark it as Resolved. Thanks.

    Thread Starter psushant577

    (@psushant577)

    Ok I will do that…

    Thanks for your assistance.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to reduce image size of featured post.’ is closed to new replies.