CSS help! Pictures in template are auto. resizing in new pages

  • Unknown's avatar
    futuremansd · Member ·

    I want my featured image in the exampled below post to be smaller and not take the full width of the template….each picture on the homepage “expands” into a large and more pixelated image. (check out the difference between the homepage pic, and the expanded picture in the link..)

    https://themosaicroad.com/2016/09/19/elicia-shepard/

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

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hello there,

    This should help: 

    .single .block-thumb img, .page-featured-image img {
	min-width: auto !important;
}

    Please note, if your image is large (like the first one and the one linked in your example) it will still fill the full area (let me know if you’d like to force all images to a specific size). The other two featured images though shouldn’t blow up to be so blurry.

    Let me know if that doesn’t work,
    Sage

  • Unknown's avatar
    futuremansd · Member ·

    Sage, thanks! Perfect. (wow, been trying to figure that out for a while!)

    Sorry, one more question….do you have a simple code that would allow for a little more room to go between the header and the top menu? Need a bit more whitespace…

    Scott

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hey there Scott, glad to hear it worked!

    This should do for the header spacing, feel free to play around with the number in order to get the right amount. 

    .site-header {
	margin-top: 56px;
}

    Hope that helps,
    Sage

  • The topic ‘CSS help! Pictures in template are auto. resizing in new pages’ is closed to new replies.