Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 20, 2019 at 4:56 am #1092799
    canadianllama

    Hi, I was able to get it looking like this: https://fvhrs.org/homerevision2019/

    But ideally want it to look like this mockup. Is that possible? And have it have some sort of responsiveness?
    https://canadianllama.tinytake.com/sf/MzQ3Mzg5OF8xMDQxMjc3NQ

    Thanks

    April 22, 2019 at 5:34 am #1093232
    Rikard

    Hey canadianllama,

    Please try the following in Quick CSS under Enfold->General Styling:

    .page-id-4149 #full_slider_1 .container {
    width: 100%;
    max-width: 100% !important;
}

.page-id-4149 #full_slider_1 .slideshow_inner_caption {
    padding: 0;
}

    Best regards,
    Rikard

    April 23, 2019 at 4:01 am #1093495
    canadianllama

    That worked great – thank you! Its still not touching the bottom of the slider/video image thought. If you look its got a gap there. I can’t find any padding or margin that is causing it to not touch the bottom. Any idea?

    April 23, 2019 at 10:16 am #1093602
    Rikard

    Hi,

    Please try this as well:

    .page-id-4149 .av-video-slide .caption_fullwidth {
    bottom: 0;
}

    Best regards,
    Rikard

    April 23, 2019 at 7:01 pm #1093721
    canadianllama

    Thank you – fixed!, i just needed to add !important and it worked!

    .page-id-4149 .av-video-slide .caption_fullwidth {
    bottom: 0!important;
}
    April 24, 2019 at 8:10 pm #1094149
    Victoria

    Hi canadianllama,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 25, 2019 at 12:41 am #1094222
    canadianllama

    We are also having a problem where we would like the slider to be ‘taller’ on mobile. Right now you mostly just see the text on a phone, and the picture squishes down small we would like the picture to show more, like fill the whole mobile screen with the text filling the bottom part of the screen?… is that possible?

    April 29, 2019 at 1:14 pm #1095257
    Victoria

    Hi canadianllama,

    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:767px){
  #full_slider_1, 
  #full_slider_1 .av_slideshow_full.avia-slideshow,
  #full_slider_1  .avia-slideshow-inner,
  #full_slider_1 .avia-slideshow li,
  #full_slider_1 .avia-slideshow li img {
    min-height: 240px;

  }
  #full_slider_1 .avia-slideshow li img {
    width: 140% !important;
    max-width: auto;
  }
   .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
      padding-top: 0px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 29, 2019 at 10:44 pm #1095500
    canadianllama

    Hi Victoria,

    That is the idea, but we want the picture much taller and this code stretches the picture and makes it look weird. Any other thoughts?
    We don’t mind the size of the picture being cropped off if it needs to, or zoomed in a bit or whatever to make it work. But stretched makes it look really bad.

    Thanks

    May 3, 2019 at 9:10 am #1096803
    Victoria

    Hi canadianllama,

    Please try the code like this:

    

@media only screen and (max-width:767px){
  #full_slider_1, 
  #full_slider_1 .av_slideshow_full.avia-slideshow,
  #full_slider_1  .avia-slideshow-inner,
  #full_slider_1 .avia-slideshow li,
  #full_slider_1 .avia-slideshow li img {
    min-height: 240px;

  }
   .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
      padding-top: 0px;
  }
  .avia-slide-wrap {
    width: 160%;
  }
  .caption_bottom .slideshow_caption .slideshow_inner_caption {
    width: 80vw;
  }
}

    Best regards,
    Victoria

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