Easy slider caption title and text alignment on mobile screens - Support

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
January 29, 2019 at 12:23 pm #1059963

Chris
Participant

Hi,

I have the following issues with the caption title and caption text for Full-width Easy Slider on the mobile version:

1. Caption title: Padding on the left is way off – the title text starts off the screen on the left.

2. Caption text: The spacing between the caption title and the caption text is too large – the caption text can’t be seen.

Help?

Thanks!

January 29, 2019 at 12:59 pm #1059978

Chris
Participant

As an FYI, here is everything I currently have in my Quick CSS the relates to the mobile header:

@media only screen and (max-width: 989px) {
.avia_transform .av_slideshow_full .avia-caption-title {
font-size: 1em;
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-content {
font-size: 12px;
}

.av_slideshow_full li img {
min-width: 900px;
margin-left: 15px;
}

@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background-color: transparent;
position: absolute!important;
}}
.slideshow_caption .slideshow_inner_caption {
top: -40px;
}
}

@media only screen and (max-width: 480px) {
.logo {
position: relative!important;
top: 13px!important;
}
#header_main .inner-container {
height: 120px;
}}

@media only screen and (max-width: 767px) {
.avia-caption-content {
display:none !important;
}
.responsive #top .slideshow_caption h2 {
font-size: 32px !important;
margin-left: -53px!important;
}
}

January 29, 2019 at 1:02 pm #1059979

Chris
Participant

And one last piece of custom CSS that I’ve got rattling around in my General Styling tab … I’m not sure what it even does, but I’m just adding it in case:

.push-right{
position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
}
@media only screen and (max-width:767px) {
.push-right{
position:relative;
right:auto;
transform:none;
}}

January 29, 2019 at 2:38 pm #1060005
Nikko
Inactive Moderator
Hi sheilaregan,

Can you try adding this css code as well:
```
@media only screen and (max-width:479px) {
  .responsive #top .slideshow_caption h2 {
    margin-left: 0 !important;
  }

  .responsive #top .avia-caption-content {
    display: block !important;
  }
}
```
Best regards,
Nikko
January 29, 2019 at 3:40 pm #1060052

Chris
Participant

That worked! Brilliant stuff, thank you Nikko! And thanks for being so quick.

I just saw however that there’s another problem now.

On the mobile phone in portrait mode, everything is great. But in landscape mode, the title text goes off the screen on the left and the caption text is completely cut off again (can’t see it at all).

And on the tablet it’s the opposite. In landscape mode everything is great, but in protrait mode the title text is fine but the caption text, while still partly visible, gets cut off at the bottom.
The one exception on the tablet is the homepage: both in landscape mode and in portrait mode the text is getting cut off. (There’s more text here, so I guess that makes sense.)

January 31, 2019 at 12:24 pm #1060925

Chris
Participant

Hi Nikko (or anyone),
Would it be possible to please get some help on my final questions above?
Thanks!

February 2, 2019 at 2:21 am #1061819
Nikko
Inactive Moderator
Hi sheilaregan,

We apologize for the delayed response, please replace the last code I gave with this css code:
```
@media only screen and (max-width:959px) {
  .responsive #top .slideshow_caption {
    width: 100%;
  }

  .responsive #top .slideshow_caption h2 {
    margin-left: 0 !important;
  }

  .responsive #top .avia-caption-content {
    display: block !important;
  }
}
```
Best regards,
Nikko
February 11, 2019 at 1:00 pm #1065409

Chris
Participant

Hi Nikko,
now it’s my turn to apologise for the delay on my end.
Thanks for your response – I replaced that code, cleared the caches on my tablet and mobile phone, and had a look, but the problem still persists.
Perhaps you’d like to take a look at my back-end yourself?
I just set up a temporary login for a moderator (Vinay) to use on another forum topic that I have running – I can give you the URL too if you’de like.
Best

February 12, 2019 at 5:26 pm #1066006

Nikko
Inactive Moderator

Hi sheilaregan,

No worries :)
It’s not working because the css above it are already wrong and it doesn’t process the bottom css properly.
I have modified your Quick Css code and grouped the media queries, it’s working fine now.
Your original Quick CSS code is in private content just incase you need it.

Best regards,
Nikko

February 13, 2019 at 12:22 pm #1066452

Chris
Participant

Thank you Nikko!
It’s working perfectly, like a charm!
I really appreciate the help.
So, there is one small thing that still needs a tweak – on the homepage, on the tablet in landscape mode, the caption text (below the caption title) goes off the bottom of the banner. This is only for the tablet in landscape mode. And it’s only for the hompage, and the reason is that there’s a little bit more text on the homepage banner.
So, I think I know how one can solve this poblem, but I’m not sure what the code for it would look like. I think you would need to write a code that specifically targets the tablet landscape mode screen width (and no other screen widths) and let the caption title and caption text extend a little further along the page – i.e let the caption title only take up two lines instead of three, by letting the lines be a little longer.
Does that make sense?
Would you be able to tell me what code could accomplish that?
Thanks so much!
After this fix, then everything will finally be sorted out :)

February 18, 2019 at 2:27 am #1068084
Nikko
Inactive Moderator
Hi sheilaregan,

I apologize for the delayed response. I have replaced this css code:
```
@media only screen and (max-width:959px) {
    .responsive #top .slideshow_caption {
        width: 100%;
    }

    .responsive #top .slideshow_caption h2 {
        margin-left: 0 !important;
    }

    .responsive #top .avia-caption-content {
        display: block !important;
    }
}
```
with:
```
@media only screen and (max-width:1024px) {
    .responsive #top .slideshow_caption {
        width: 100%;
    }

    .responsive #top .slideshow_caption h2 {
        margin-left: 0 !important;
    }

    .responsive #top .avia-caption-content {
        display: block !important;
    }
}
```
Best regards,
Nikko
March 1, 2019 at 11:33 pm #1073449

Chris
Participant

Hi Nikko,
Sorry for getting back to you so late, I was away from this project for a week.
It looks perfect now – thank you so much!
You can close this topic.

March 2, 2019 at 6:12 pm #1073651

Nikko
Inactive Moderator

Hi sheilaregan,

No worries :)
Glad that we are able to help :)
Thanks again for using Enfold and have a great day!

Best regards,
Nikko
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Easy slider caption title and text alignment on mobile screens’ is closed to new replies.