Header Image / Featured Image

  • Unknown's avatar
    booncroft · Member ·

    re: https://proofingcom.wordpress.com/roofing/

    From what I understand while chatting with support:
    With the template I’m using
    Header Images are 1230 x 576
    Featured Images are 1230 x 1230

    For the above mentioned page, the picture is formatted to 1230×576, as a result, it looks weird. I don’t to amend the image to 1230×1230. Support had recommended I get in contact with CSS forum to see if there is a work around so the image is reflected properly

    can you help?

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, this is a bit challenging with responsive themes, but add the following to the very bottom of your custom CSS and see what you think. I’ve specifically targeted the roofing page with the unique page id CSS class from the opening body HTML tag from that page. 

    .page-id-47 .hero-image .hero {
	background-size: cover;
	background-position: left top;
}
.page-id-47 .with-featured-image {
	height: auto !important;
	min-height: 400px;
}
@media screen and (max-width: 480px) {
	.page-id-47 .with-featured-image {
		min-height: 200px;
	}
}

    Make sure and view on a tablet and phone to see how things look.

  • Unknown's avatar
    booncroft · Member ·

    deleting this in the CSS i think actually fixed everything

    .with-featured-image {
    height: 1500px;
    }

  • Unknown's avatar
    thesacredpath · Member ·

    Super, let us know if you have additional questions.

  • Unknown's avatar
    atrparkansas · Member ·

    how do I find out the page id if I want to use this on one of my pages? I’m trying to resize the featured image on

    https://atrp.arkansas.gov/resources-services/brain-injury-resources/

  • Unknown's avatar
    thesacredpath · Member ·

    @atrparkansas, you can use the web inspector built into your browser and then in the left pane – the html section – look for the opening body html tag and within the listing of CSS classes there, you will find the unique page id CSS class. For your main page, this would be what the opening body html tag would look like.
    <body class="page page-id-225 page-child...
    page-id-225 would be the unique page id CSS class.

  • The topic ‘Header Image / Featured Image’ is closed to new replies.