Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 10, 2020 at 12:36 pm #1202648
    Mike1050

    Hi,

    I search the form for a bit, but didn’t find a solution: The button in the first slide of this website https://www.tierarzt-seewald.at/ is cut off on mobile devices in portrait. I tinkered around with headline font sizes to get the button up. Headline and Button just need to come up a little bit. On desktop and mobile landscape everything is fine.

    Thanks for your help!

    All the best,
    Mike

    April 11, 2020 at 2:08 pm #1202905
    Victoria

    Hey Mike1050,

    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;
  }
  #top .slideshow_align_caption {
    bottom: -25px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 11, 2020 at 2:08 pm #1202906
    Victoria

    Hey Mike1050,

    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;
  }
  #top .slideshow_align_caption {
    bottom: -25px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 13, 2020 at 4:53 pm #1203312
    Mike1050

    Hi Victoria,

    thanks for your answer and the code!

    Unfortunately the code does not work in “Quick CSS” or in “Appearance > Editor > Style.css”. I don’t know how to edit the CSS File on the FTP. Is their any other way to do this apart from putting it into “into themes/enfold/css/custom.css”?

    Here’s a link to a mobile screenshot where the “button-problem” is visible: https://ibb.co/88ydJZr

    Thank you & best regards,
    Mike

    April 13, 2020 at 11:48 pm #1203388
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (max-width:767px){
.slideshow_align_caption{
bottom:0px!important;
}}

    Best regards,
    Jordan Shannon

    April 14, 2020 at 6:28 pm #1203710
    Mike1050

    Hi,

    thanks for the code. Still not working.

    Any suggestions?

    Thanks & best regards,
    Mike

    April 14, 2020 at 8:32 pm #1203744
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    April 15, 2020 at 1:54 pm #1203978
    Mike1050

    Hi Jordan,

    absolutely awesome – that was it, thank you very much!

    You can close the thread.

    All the best,
    Mike

    April 15, 2020 at 5:56 pm #1204085
    Victoria

    Hi Mike1050,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Fullscreen slide show button mobile’ is closed to new replies.