Fullscreen Slider Caption on mobile

Hi Markus,

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){
    #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: 200px;
  }
  #full_slider_1 .avia-slideshow li img {
    width: 273%;
  }
  .slideshow_inner_caption {
      height: 36%;
      top: 10%;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Basilis

Hi,

1. For testing purpose, we need to disable CSS and JS merging from Enfold > Performance and remove the previous code from custom.css.
2. Enable custom CSS class name support for Layout Builder elements from Enfold > Layout Builder.
3. Assign a custom class “custom-slider” to the homepage slider.
4. Since the mobile device has less space we will hide the paragraph text and make the headings 40% width of the slider and font size relative to 3.5% of the viewport width.
by adding the below CSS in Quick CSS:

/* Slider caption width */

@media only screen and (max-width: 480px) {
#top .custom-slider .slideshow_align_caption h2 {
    font-size:3.5vw!important;
    line-height: 20px;
    max-width:40vw;
}

#top .custom-slider .slideshow_align_caption p {
	display:none;
}}

Best regards,
Vinay

Hi,

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){
  #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: 250px !important;
  }
  #full_slider_1 .avia-slideshow li img {
    width: 258%;
  }
  .slideshow_inner_caption {
      height: 36%;
      top: 20%;
  }
    #top .custom-slider .slideshow_align_caption p {
      width: 50vw;
  }
}

Please remove this code:

#top .custom-slider .slideshow_align_caption p {
	display:none;
}

If you need further assistance please let us know.

Best regards,
Victoria

• This reply was modified 6 years, 9 months ago by Victoria.

Hi,

Glad we could help!

Please take a moment to review our theme and show your support https://themeforest.net/downloads
Don’t forget to bookmark Enfold Documentation for future reference.

Thank you for using Enfold :)

Best regards,
Vinay