Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 10, 2022 at 9:50 pm #1368346
    woogie07

    Hi,

    I am trying to get an image to show full width that displays in aspect ration and resizes without cropping on mobile.

    I have looked at documentation using a colour section with documentation here but i does not seem to work]]eg:]

    1.) Add a color section then follow this short documentation to make the container full width.
    // http://kriesi.at/documentation/enfold/color-section-with-100-container/

    eg insert a section ID in the color section > Advanced
    section-container-width

    Then add the code in the quick CSS
    /* Color section container width */
    #section-container-width .container {
    width: 100% !important;
    min-width: 100%;
    padding: 0;
    margin: 0;
    }

    2.) Inside the color section, insert the “Image” element.

    3.) Go to the Quick CSS field and then add the following css code.

    .avia-image-container avia-image-container-inner, .avia-image-container avia-image-container-inner img {
    width: 100%;
    }

    ******

    Is this the correct process for having full width image?

    Thanks
    Marcus

    October 11, 2022 at 11:50 am #1368416
    Ismael

    Hey woogie07,

    Thank you for the inquiry.

    Yes, that should work but have you tried using a Fullwidth Slider element instead? You can also insert the Image element inside a Grid Row element with a single cell.

    Best regards,
    Ismael

    October 11, 2022 at 12:08 pm #1368417
    Guenni007

    Take a color-section – give a custom-class to it – f.e.: responsive-background
    ( no minimum height option ! )

    Place your image as background-image to this color-section – and set it to cover the background.
    Now : look for the aspect ratio of that background image ( on my testpage it is 1500:686 = 100:45,73 )

    now place to your quick css :

    .avia-section.responsive-background {
  height: 45.73vw;
  min-height: 0;
}

    see: https://enfold.webers-webdesign.de/responsive-background-image/
    If you have a boxed layout – we need to set a max-height for that color-section

    October 11, 2022 at 3:00 pm #1368434
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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