• What CSS do I need to use in order to modify height, width, and alignment of my posts’ featured images?

    Also, what CSS do I need to use to change sizes of posts’ titles at the homepage (post preview)?

Viewing 1 replies (of 1 total)
  • AddWeb Solution

    (@addweb-solution-pvt-ltd)

    Hi,
    There two possible solutions to set image size in WordPress featured images in post.
    Solution 1) The options available in wp-admin to set the size of a featured image from the available options of Thumbnail, Medium, Large.
    Follow below guidelines for the first option

    — Go To Dashboard => Posts => All and then Posts => Add New/Edit Posts.
    — In right side bottom “set featured image” link, click on it
    — click on “select files” button,upload featured image from your computer
    Instead of clicking the button and then uploading a new image, you will able to drag and drop the image directly to the spot.
    — select feature image after that click on “edit image” link provide Thumbnail setting for modify various image sizes
    => The original size/All image sizes
    => Thumbnail
    => All sizes except thumbnail
    1)The original size/All image sizes:
    once you upload image wordpress store original image size without modifications
    2)Thumbnail size image width and height
    width: 150px
    height: 150px
    3)All sizes except thumbnail returns the medium and large size of image
    Medium size
    max-width= 300px
    max-height=300px
    Large size:
    max-width= 1024px
    max-height=1024px
    you can change height width of thumbnail image ,by Setting => Media Setting => Image Size

    Solution 2) To change the image size using CSS follow below guidelines

    Overwrite post’s feature image styling with below css in your custom stylesheet of a child theme,

    // feature image parent class
    .single-featured-image-header {
      display: inline-block;
      width:100%;
    }
    //css of feature image
    .single-featured-image-header img {
      height: auto;
      max-width: [width];
      width: 100%;
      float: left;("//for alignment of image use float property")
    }
    //for center alignment of feature image 
    .single-featured-image-header img {
      height: auto;
      width: 100%;
      max-width: [width];
      margin-right: auto;
      margin-left: auto;
      display: block;
    }

    To change the font-size of a post’s title use font-size css property

Viewing 1 replies (of 1 total)
  • The topic ‘Featured image size control + Post title size’ is closed to new replies.