Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 23, 2025 at 1:43 pm #1488444
    solf

    Hey,
    An SVG image is embedded in a grid cell. The display is relatively small, even though there is plenty of space around the cell.
    How can I control the size of the image?

    thanks

    ===================
    Größe des Bildelements in einer Rasterzeile

    In einer Rasterzelle ist ein SVG-Bild eingebunden. Die Darstellung ist relativ klein, obwohl rundum noch viel Platz ist der Zelle ist.
    Wie kann ich die Grösse des Bildes beeinflussen?

    danke

    August 24, 2025 at 11:49 am #1488460
    Mike

    Hey solf,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #av-layout-grid-1 .avia-image-container .avia-image-container-inner img {
	height: 100%;
	width: 100% !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 25, 2025 at 7:58 pm #1488501
    solf

    Hey Mike,
    Thank you.
    The graphic is too large at 100%.
    I’ve now set the height/width to 60%.
    But that makes the graphic shift from the center…?!
    Since I need to set other graphics to a different value, I need to be able to set the size settings individually.
    best regards, solf
    ===
    Danke. Mit 100% ist die Grafik zu gross.
    Ich habe height /width nun auf 60% gesetzt.
    Damit rutscht die Grafik allerdings aus der Mitte…?!
    Da ich andere Grafiken auf einen anderen Wert setzen muss, müsste ich die grössenangaben individuell setzen können.
    mfg, solf

    August 25, 2025 at 11:04 pm #1488506
    Mike

    Hi,
    Try adding a custom class to the image element in the advanced tab > developer settings > custom class
    Screen Shot 2025 08 25 at 5.01.12 PM
    then adjust the css to suit, you can add a custom class to each image and add new css for each one.

    Best regards,
    Mike

    August 27, 2025 at 6:31 am #1488578
    solf

    Hi Mike,

    thank you.

    1. #av-layout-grid-1 .avia-image-container .avia-image-container-inner img .customclass?
    2. How can I prevent the graphic from slipping out of center?

    greetinx, solf

    August 27, 2025 at 7:37 am #1488586
    Ismael

    Hi,

    Thank you for the update.

    1.) The selector would be “#top .avia-image-container.customclass .avia-image-container-inner img” since the custom class is applied to the parent container.

    2.) Set the margin to “0 auto” to align the image to the center.

    #top .avia-image-container.customclass .avia-image-container-inner img { 
    margin: 0 auto; 
}

    View post on imgur.com

    Best regards,
    Ismael

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