Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 29, 2018 at 4:47 pm #1027623
    pistachiouk

    Hiya,

    I am creating a site where the banner images are set as 1 main one with 2 small images at the side. I’ve tried various ways of doing this, but settled on Grids. (If anyone has better way I would love to hear it :-) )

    But I’m struggling with the styling. The background images are not responsive and so it gives white strips on the width of the images as the page gets wider and the images are cut off on mobile.

    Any ideas?

    October 30, 2018 at 2:21 pm #1028035
    Victoria

    Hey Marie,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    October 30, 2018 at 4:50 pm #1028155
    pistachiouk
    This reply has been marked as private.
    November 2, 2018 at 4:35 pm #1029197
    Victoria

    Hi Marie,

    Thank you for the screenshots.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
    .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding.avia-builder-el-5 {
         background-size: contain !important;
         min-height: 215px !important;
    }
}

@media only screen and (min-width: 1440px) {
    .responsive #top #wrap_all .av-flex-cells .no_margin.av-zero-padding.avia-builder-el-5 {
         background-size: cover !important;
    }

    #top .flex_column.av_one_full.avia-builder-el-9,
    #top .flex_column.av_one_full.avia-builder-el-11 {
         background-size: cover !important;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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