Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 11, 2020 at 4:43 am #1236556
    Dave

    Hi
    On the home page https://dev.davecane.com we are using ‘Full-width Easy Slider’ with ‘transparent header’. The Captions (Heading and subheading) is set as ‘Centre without frame’

    BUT, on small screen devices (Mobile phone), the Caption it is not in the centre of the header slider (vertical centre). The Caption gets cut off by the bottom of the header image section.

    How do we get it to stay in the middle on all screen sizes when the Transparent header is selected?

    Kind regards
    Dave

    August 12, 2020 at 5:26 am #1236823
    Rikard

    Hey Dave,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.home .slideshow_caption {
    padding-top: 0;
}
}

    Best regards,
    Rikard

    August 14, 2020 at 4:40 am #1237653
    Dave

    Hi Rikard
    No joy this didn’t work!

    The Captions (Heading and subheading) is still not centre of the frame image (vertical centre). That’s on ‘Full-width Easy Slider’ with ‘transparent header’.

    It’s a pity the Caption just can’t stay in the centre on all screen sizes!

    Cheers Dave :(

    August 15, 2020 at 4:40 am #1237968
    Dave

    This is a screenshot of the Caption not centering on small screen.
    https://snipboard.io/J9wXLM.jpg

    I also tried deactivating all the plugins with No effect.

    Just in case the existing CSS has anything to do with the Caption not centering here it is –
    I’ve tried isolating different bits of CSS with no difference.

    /*small bar above header Phone No size*/
    .phone-info {
    width: 200px;
    padding-top: 10px;
    padding-left: 1px;
    font-size: 18px !important;
    }

    /*Reduce space above header caption on Fullwidth slider*/
    @media only screen and (max-width: 767px) {
    .home .slideshow_caption {
    padding-top: 0;
    }
    }

    /*Header NO Border*/
    #header_meta {
    border: none! important;
    }

    /*small bar above header Phone No size*/
    /*
    #top .social_bookmarks li a {
    width: 55px;
    line-height: 36px;
    min-height: 55px;
    font-size: 30px;
    }
    */

    /*burger menu border colour*/
    /*
    @media only screen and (max-width: 979px) {
    #top #wrap_all
    #advanced_menu_toggle {
    border-color:#888888!important;
    }
    }
    */

    /*Reduce space above header caption on Fullwidth slider*/
    .avia_transform .av-extra-border-element.border-extra-diagonal {
    margin-top: -210px;
    }

    /*scroll up arrow position*/
    /*
    #scroll-top-link {right:125px; }
    */

    Any ideas would be appreciated
    Cheers Dave

    August 16, 2020 at 5:20 am #1238079
    Rikard

    Hi Dave,

    Please try this CSS instead:

    @media only screen and (max-width: 767px) {
.home .slideshow_caption {
    padding-top: 0 !important;
}
}

    Best regards,
    Rikard

    August 17, 2020 at 12:31 am #1238307
    Dave

    That worked thanks heaps for your help really appreciate it
    Cheers Dave

    August 17, 2020 at 4:23 pm #1238528
    Victoria

    Hi Dave,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.