Sign in
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

  • This topic has 3 replies, 2 voices, and was last updated 5 months ago by .
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10618
    Avatar photocumlaude

    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!

    #10620
    Avatar photojuliope

    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.

    #10627
    Avatar photocumlaude
    juliope 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
    EnlighterJS 3 Syntax Highlighter
    <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.

    #10631
    Avatar photojuliope

    Excellent…

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