Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 18, 2015 at 1:09 am #397914
    Nomodic

    Hi there,

    Through various web searches I’ve been able to figure out how to change the font size of the Easy Slider captions (mobile only) and remove the grey boxes behind them. I have two issues I haven’t yet been able to solve; any help would be appreciated:

    1. When I look at the mobile version on an iPhone at its usual (vertical) orientation, the captions “hug” the bottom left corner nicely. When I rotate the phone, however, the captions move up towards the centre of the photo, obscuring the photo. How can I move the captions back down towards the bottom left corner when the phone is rotated?

    2. The space between the caption title and subtitle is a bit too big when in this rotated mobile view. How can I bring them closer together (i.e. how can I bring the caption title down closer towards the subtitle)?

    Any help would be greatly appreciated – thanks again for the awesome theme and support.

    Curtis

    February 18, 2015 at 3:26 pm #398174
    Yigit

    Hey Nomodic!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
.avia-caption { bottom: -10px; }
h2.avia-caption-title {
margin-bottom: -10px!important;
}}

    Best regards,
    Yigit

    February 18, 2015 at 5:16 pm #398275
    Nomodic

    Thanks Yigit. A couple issues happening now:

    – When viewed on mobile at a normal vertical orientation, the caption titles now get cut off at the bottom. Note that I also have a Quick CSS code to remove the subtitles from captions when the screen size is below 480px (I found it was obstructing the image at small sizes). So essentially the subtitles should appear when the phone is rotated 90 degrees to a horizontal view.

    – When the phone is rotated 90 degrees the captions and subtitles did move down, but:
    1. There is still a large gap between the caption and subtitles (can we move only the caption title down towards the subtitle?)
    2. There is still a large margin on the left (bottom margin looks great however).

    Any help would be appreciated. Thanks again!

    February 18, 2015 at 5:45 pm #398314
    Yigit

    Hi!

    Can you try changing the code i posted to following one

    @media only screen and (max-width: 768px) and (min-width: 481px) {
.avia-caption { bottom: -10px; }
h2.avia-caption-title {
margin-bottom: -10px!important;
}}

    Regards,
    Yigit

    February 19, 2015 at 7:04 pm #399163
    Nomodic

    Thanks again. The captions still had a large left margin but I was able to tweak your code to solve the problem:

    @media only screen and (max-width: 768px) and (min-width: 481px) {
    .avia-caption { bottom: -10px; left: -18px;}
    h2.avia-caption-title {
    margin-bottom: -5px!important;
    }}

    Thanks again!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Easy Slider caption alignment on mobile’ is closed to new replies.