Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Featured image Persona theme

Forum › General Inquiry

  • September 21, 2023 at 7:25 pm #10618
    Avatar photo[anonymous]

    Hello everyone.

    I’m using the Persona theme and would like to modify the rectangular aspect of the featured image of the articles to something more square (16:9), something like in the Technews theme.

    Could you help me by telling me what CSS code I should modify to achieve this?

    thanks!

    September 23, 2023 at 7:27 am #10620
    Avatar photo[anonymous]

    Hi, I’m new here but maybe putting this in the CSS field will help you

    .c-card__image{
height: 100%;
max-height: 400px;
object-fit: cover;
aspect-ratio: 16/9;
}

    Points to the c-card__image class
    It seems to me that you can adjust it based on the width and height of your images.
    (max-height) tells you what maximum size you want it to extend and (height) tells you it will extend to the maximum height you set.
    You can also play with (aspect-ratio) there are several, you can search for examples on Google.

    September 23, 2023 at 4:38 pm #10627
    Avatar photo[anonymous]
    [anonymous] wrote:

    Hi, I’m new here but maybe putting this in the CSS field will help you

    Plain text
    Copy to clipboard
    Open code in new window
    <span class=”enlighter-text”>.c-card__image</span><span class=”enlighter-g1″>{</span>
    <span class=”enlighter-text”>height: </span><span class=”enlighter-n1″>100</span><span class=”enlighter-text”>%;</span>
    <span class=”enlighter-text”>max-height: 400px;</span>
    <span class=”enlighter-text”>object-fit: cover;</span>
    <span class=”enlighter-text”>aspect-ratio: </span><span class=”enlighter-n1″>16</span><span class=”enlighter-text”>/</span><span class=”enlighter-n1″>9</span><span class=”enlighter-text”>;</span>
    <span class=”enlighter-g1″>}</span>
    .c-card__image{ height: 100%; max-height: 400px; object-fit: cover; aspect-ratio: 16/9; }

    .c-card__image{ height: 100%; max-height: 400px; object-fit: cover; aspect-ratio: 16/9; } Points to the c-card__image class

    It seems to me that you can adjust it based on the width and height of your images.

    (max-height) tells you what maximum size you want it to extend and (height) tells you it will extend to the maximum height you set.

    You can also play with (aspect-ratio) there are several, you can search for examples on Google.

    @juliope Thank you for your response.

    Your guide helped me to find the solution for my case.

    September 24, 2023 at 9:25 am #10631
    Avatar photo[anonymous]

    Excellent…