[Support request] Adjust featured image size

Home Forums Support [Support request] Adjust featured image size

Home Forums Support Adjust featured image size

Viewing 15 posts - 16 through 30 (of 31 total)
  • Author
    Posts
  • #1029878
    Hilton

    Hi,

    I found out a way to (partially) get the desired results. Now I’d like to know how can I adjust the CSS to apply to all screen sizes? The problem below is that I am using “height:380px” and because of that I cannot use it to smaller screen sizes (only to 1190px and above).


    @media
    (min-width: 1190px) {
    .post-image-below-header.post-image-aligned-center .inside-article .featured-image {
    width:auto;
    height:380px;
    overflow: hidden;
    }
    .single-post .featured-image img, .single-post .post-image img {
    width:100%;
    }
    }

    #1030461
    Tom
    Lead Developer
    Lead Developer

    I’m not sure I fully understand – what about that CSS do you want to apply to all screens?

    #1030515
    Hilton

    Hi Tom,

    My featured images are around 620×300 px, and I need to enlarge them to fit the full width in the featured image area. So I used this CSS:

    .single-post .featured-image img {
    width:100%;
    }

    But as they have different heights, I wanted to adjust to make all looking with the same aspect ratio, on both desktop and mobile.

    #1030551
    Leo
    Staff
    Customer Support

    You could try setting a fixed height:

    .single-post .featured-image img {
        width:100%;
        height: 200px;
    }
    #1030555
    Hilton

    It doesn’t work on mobile ๐Ÿ™

    #1030556
    Leo
    Staff
    Customer Support

    Actually not seeing the CSS being added.

    Can you disable your caching plugin?

    #1030563
    Hilton

    Please use the dev website

    #1030594
    Leo
    Staff
    Customer Support

    Hmm still don’t see the CSS being added.

    Only seeing this:
    https://www.screencast.com/t/H5pVQTeI0L

    Any chance you can disable the caching plugin so I can see the source better?

    Thanks ๐Ÿ™‚

    #1030602
    Hilton

    Can you check again please?

    #1030604
    Leo
    Staff
    Customer Support

    max-height won’t work as that’s maximum value it will go to. So if your image is only 339px in height, it will only go to 339px.

    If you want to use a fixed height, then you will need to use height instead.

    You will see that it wouldn’t be able to keep the original ratio.

    #1030613
    Hilton

    max-height is an attempt to crop the taller images so they can all look similar. As you can see, the max-height is applied to the overflow container.

    .single-post .featured-image {
    height: 400px;
    overflow: hidden;
    max-width: 800px;
    }

    #1030621
    Leo
    Staff
    Customer Support

    Sorry maybe I’m still confused what the end result is supposed to be.

    So you are saying that this CSS:

    .single-post .featured-image {
        height: 400px;
        overflow: hidden;
        max-width: 800px;
    }

    Does not apply to mobile?

    Can you link me to the dev site again?

    #1030744
    Hilton
    #1030757
    Leo
    Staff
    Customer Support

    So what is the issue currently?

    I do see this CSS being applied on mobile:
    https://www.screencast.com/t/i4Fnc5Xkfj

    #1030768
    Hilton

    Hi Leo,

    There is no effect having a max-height 400px on mobile as the images are much shorter than that

Viewing 15 posts - 16 through 30 (of 31 total)
  • You must be logged in to reply to this topic.