badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*

How to increase post featured image size

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #79994
    john
    Participant

    I have so many portrait images and the default featured image size can’t work for me. I want to increase the height of featured images.
    How do I do that?

    #80019
    john
    Participant

    Hello??? I’m still waiting for your response please

    #80068

    Hi John,

    Sorry for the late response but could you please tell us for which Theme you want to increase height of Featured Image.

    Thanks

    #80286
    john
    Participant

    I want to increase my post image size for Destop and mobile view. By default it is Three post per column on PC I want it to be one post per column on PC. With a height of at least 700px and width of at least 800px on Desktop view.

    (News card pro)

    #80292

    I was just trying to configure my website (http://techgeekbuzz.com) with the theme (https://www.themehorse.com/preview/newscard-pro/) but not able to configure it.

    #80312

    Hi @rajeshmasiwaltechgeek,

    It seems that you are not using our theme into your site. Please activate our theme into your site and let us know what you are trying to configure?

    Thank you!

    #80315
    john
    Participant

    I have been waiting for a response since 3 days ago.

    I want to increase my post image size for Destop and mobile view. By default it is Three post per column on PC I want it to be one post per column on PC. With a height of at least 700px and width of at least 800px on Desktop view.

    (News card pro)

    #80316

    Hi John,

    Sorry we missed your query, As you asked for the size of 700px X 800px so we have created a code for the 7:8 ratio size for Featured Image. Please go to ‘Appearance > Customize > Additional CSS’ and paste the below Custom CSS code.

    .site-main .post-wrap .post-col {
    	-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
    	max-width: 100%;
    }
    .site-main .post-wrap .post-col .post-img-wrap:before,
    .site-main .page-single-img-wrap:before {
    	padding-top: calc(87% + 2px);
    }

    Thanks

    #80317
    john
    Participant

    The code you gave did not work on the Featured post slider. It only worked for recent post

    #80318
    john
    Participant

    What code should be used to increase the height and width of the Featured post slider (Header featured posts) to be specific only.

    #80320

    Sorry to say but the Theme is designed in such a way that Featured Image sizes on certain sections are different. If we made the featured Image sizes to same ratio on all the sections then the Design Layout of the Theme will completely messed up. Like in the Header Featured Banner section, the Featured Images size on Slider and Featured Posts are made different to match the Designed Grid Layout. Also you will find different featured sizes ratio for widgets, widgets main post will have landscape ration size and other sub listed posts are of smaller square thumbnail.

    Thanks

    #80328
    john
    Participant

    I just want it to be at least 500px width and height of at least 500px. Just give me the code to to increase the height and width please.
    Thank you

    #80355

    Ok remove the previous Custom CSS code and paste the below Custom CSS code instead.

    .site-main .post-wrap .post-col {
    	-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
    	max-width: 100%;
    }
    .post-img-wrap:before,
    .site-main .post-wrap .post-col .post-img-wrap:before,
    .site-main .page-single-img-wrap:before,
    .featured-section .featured-slider .post-block .post-img-wrap:before,
    .content-area .newscard-widget-card-block-posts .column-1 .post-img-wrap:before,
    .content-area .newscard-widget-card-block-posts .column-3 .post-block .post-img-wrap:before {
    	padding-top: calc(87% + 2px);
    }
    .featured-section .featured-post .post-img-wrap:before {
    	padding-top: 87%;
    }
    .featured-section .single-featured-post .post-img-wrap:before {
    	padding-top: calc(177% + 1px);
    }
    .featured-section .two-column-featured-section .single-featured-post .post-img-wrap:before {
    	padding-top: calc(176% + 3px);
    }
    
    @media (max-width: 1199px) {
    	.featured-section .featured-post .post-img-wrap:before {
    		padding-top: calc(61% + 2px);
    	}
    	.featured-section .two-column-featured-section .featured-post .post-img-wrap:before {
    		padding-top: 87%;
    	}
    	.featured-section .single-featured-post .post-img-wrap:before {
    		padding-top: calc(126% + 1px);
    	}
    	.featured-section .two-column-featured-section .single-featured-post .post-img-wrap:before {
    		padding-top: calc(176% + 3px);
    	}
    }
    @media (max-width: 991px) {
    	.featured-section .featured-post .post-img-wrap:before,
    	.featured-section .single-featured-post .post-img-wrap:before,
    	featured-section .two-column-featured-section .single-featured-post .post-img-wrap:before,
    	.featured-section .featured-post .post-img-wrap:before,
    	.featured-section .two-column-featured-section .featured-post .post-img-wrap:before,
    	.featured-section .single-featured-post .post-img-wrap:before,
    	.featured-section .two-column-featured-section .single-featured-post .post-img-wrap:before {
    		padding-top: calc(87% + 2px);
    	}
    }

    Still some section on Featured Banner are not in the required ratio. If the updated code still didn’t match your requirement then make all the padding top value to “calc(87% + 2px)”.

    Thanks

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.