Moving Slider Caption Title & Text Location on Mobile

Hey 2eminds,

Try adding this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:480px) {
  .home #fullscreen_slider_0 h2.avia-caption-title {
    margin-bottom: 20px !important;
  }

  .home #fullscreen_slider_0 .avia-caption-content {
    padding-bottom: 35px;
  }
}

Hope this helps :)

Best regards,
Nikko

Hi Risa,

Try to adjust the padding-bottom to a higher value. Let us know if that helps :)

Best regards,
Nikko

Hi Risa,

Seems good to me, if I try to make it go higher the button will also cover the arm. Also just to make sure that what I see on my end is the same as yours, can I ask for a screenshot of how it looks on your mobile device? and if it would be okay if I put a large gap between text above the button and the button (text above the arm, button below the arm)?

Best regards,
Nikko

Hi,

Can you try to replace this code that I gave:

@media only screen and (max-width:480px) {
  .home #fullscreen_slider_0 h2.avia-caption-title {
    margin-bottom: 20px !important;
  }

  .home #fullscreen_slider_0 .avia-caption-content {
    padding-bottom: 35px;
  }
}

to this:

@media only screen and (max-width:480px) {
  .home #fullscreen_slider_0 .slideshow_caption {
    padding-top: 0 !important;
    padding-bottom: 120px;
  }

  .home #fullscreen_slider_0 h2.avia-caption-title {
    margin-bottom: 20px !important;
  }

  .home #fullscreen_slider_0 .avia-caption-content {
    padding-bottom: 0;
  }

  .home #fullscreen_slider_0 .avia-caption-content .cta-button {
    margin-top: 0;
  }
}

Let us know if this helps :)

Best regards,
Nikko