[Resolved] Images in header element appear different sizes

Home Forums Support [Resolved] Images in header element appear different sizes

Home Forums Support Images in header element appear different sizes

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1412350
    William

    Hi there,

    I noticed the images in the header of category pages and post pages appear different, where I want them to be consistent.

    Example category page and example post page

    I’m not sure why this is occurring?

    Kind regards,

    Will

    #1412855
    Leo
    Staff
    Customer Support

    Hi there,

    Since you are using this CSS:

    .page-hero #category_image img {
        vertical-align: bottom;
        max-height: 150px;
        min-width: 100px;
    }

    max-heightand min-width are both not “consistent” properties.

    Maybe try width and height instead?

    #1413734
    William

    Hi there,
    I’ve changed it to be just ‘height: 100px;’ and this looks good on this page but squashed on this page.

    The problem is the image dimensions are going to be slightly different so I do not want to change the scaling but keep the ratio the same. What would be the best way for this?

    #1413983
    Leo
    Staff
    Customer Support

    What if you only use the max-width property only?

    This article might be worth a read:
    https://www.w3schools.com/css/css3_images.asp

    #1414082
    William

    That works a charm 🙂 thank you.

    I have one other small CSS regarding the header element, should I open up a new topic or push it here?

    #1414112
    Leo
    Staff
    Customer Support

    A new topic would be good.

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