Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1059963

    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!

    #1059978

    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;
    }
    }

    #1059979

    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;
    }}

    #1060005

    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

    #1060052

    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.)

    #1060925

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

    #1061819

    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

    #1065409

    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

    #1066006

    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

    #1066452

    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 :)

    #1068084

    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

    #1073449

    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.

    #1073651

    Hi sheilaregan,

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

    Best regards,
    Nikko

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.