Mobile View 'Full Screen Slider'

Hey marsh1984,

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 - */

@media only screen and(max-width: 767px) {
#top .avia-fullscreen-slider .slideshow_align_caption {
    vertical-align: top;
}
#top .avia-fullscreen-slider .avia-slideshow-arrows {
    display:none;
}}

You may not see the changes until the cached files are cleared in your browser.

Please perform the below steps to clear the browser cache:

1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

Best regards,
Vinay

Hi marsh1984,

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) {
  .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
      padding-top: 40px;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi marsh1984,

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) {
  .avia-slideshow-arrows.avia-slideshow-controls {
    display: none;
  }
}

You can try using the header transparency on mobile

If you need further assistance please let us know.

Best regards,
Victoria