Fullscreen slider Mobile Fallback image scale to fit

Hey goldiejake123,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - */

#top #fullscreen_slider_1 .av-element-cover.av-mobile-fallback-image {
/* 	background-size: cover !important; */
	background-position: 25% 0;
}

Best regards,
Vinay

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

Hi,

Try the following in quick css:

@media only screen and (max-width: 767px)  {
.avia-slideshow-inner {
height:50%!important;
}

.slideshow_align_caption{
vertical-align:top!important;
padding-top:25px!important;
}

#services{
margin-top:-350px!important;
}
}

Best regards,
Jordan Shannon

Hi goldiejake123,

If you need to apply this only for a specific page, for example if it’s homepage you can use this code isntead:

@media only screen and (max-width: 767px)  {
  .home .avia-slideshow-inner {
    height: 50% !important;
  }

  .home .slideshow_align_caption{
    vertical-align: top !important;
    padding-top: 25px !important;
  }

  .home #services{
    margin-top:-350px!important;
  }
}

If it’s other pages, you can replace .home with .page-ID, where ID is the page id number of that said page.
Hope this helps.

Best regards,
Nikko

Hi goldiejake123,

I see, can you try to use this code instead:

@media only screen and (max-width: 767px)  {
  .home #fullscreen_slider_1, 
  .home #fullscreen_slider_1 * {
    max-height: 320px;
  }
}

Hope it helps.

Best regards,
Nikko