HVAC theme slider text overlap

Home Forums All Other Themes HVAC theme slider text overlap

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #208483
    NigelNigel
    Participant
    • Topics: 174
    • Replies: 314
    • Total: 488
    Member since: March 17, 2016

    dev site: https://wiknc.nimsite.uk/

    Hi, my client has highlighted an issue with the slider text on his tablet (portrait/landscape). The slider text is sitting above the navigation. (it’s OK on dektop and mobile phone screens)

    see: https://wiknc.nimsite.uk/wp-content/uploads/2023/10/Capture1.jpg

    is there a fix please, ie: change the mobile menu activation to a wider screen size and stop it going up too far?

    thanks

    Nigel

    #208929
    Sonal S SinhaSonal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30793
    • Total: 30793
    Member since: August 16, 2013

    Hi,

    Kindly use this CSS.

    @media screen and (min-width:768px) and (max-width:900px) {
    .slider-main .nivo-caption .title { font-size:28px;}
    .slider-main .nivo-caption .nivo-caption-content { max-width:500px;}
    .home.has_trans_header .slider-header-layout3 .nivo-caption { top:80%;}
    }
    
    @media screen and (min-width:901px) and (max-width:1023px) {
    .slider-main .nivo-caption .title { font-size:28px;}
    .slider-main .nivo-caption .nivo-caption-content { max-width:500px;}
    .home.has_trans_header .slider-header-layout3 .nivo-caption { top:70%;}
    }
    
    @media screen and (min-width:1024px) and (max-width:1160px) {
    .slider-main .nivo-caption .title { font-size:32px;}
    .slider-main .nivo-caption .nivo-caption-content { max-width:500px;}
    .home.has_trans_header .slider-header-layout3 .nivo-caption { top:80%;}
    }
    
    @media screen and (max-width:1024px) {
    #footer.footer-type3 .rowfooter { margin:0;}
    }

    Regards,
    Dave

    #209176
    NigelNigel
    Participant
    • Topics: 174
    • Replies: 314
    • Total: 488
    Member since: March 17, 2016

    thanks, I’ll edit these parameters

    #209298
    Sonal S SinhaSonal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30793
    • Total: 30793
    Member since: August 16, 2013

    Okay

    #209448
    NigelNigel
    Participant
    • Topics: 174
    • Replies: 314
    • Total: 488
    Member since: March 17, 2016

    Hi
    I’m changing the parameters for the code sent but they do not appear to be changing the overlap issue on a tablet/landscape screen (612px wide) – working OK in portrait mode tho

    see: https://wiknc.nimsite.uk/wp-content/uploads/2023/11/Capture2-621pixel-wide.jpg

    this is the code set-up in the custom CSS. Can you advise what to change please

    thanks

    Nigel

    span.desc{display: none;}

    @media screen and (max-width:500px) {
    .logo img { max-width:115%;}
    span.desc { font-size:20px;}
    .phonenumber a { font-size:20px; margin:0;}
    }

    @media screen and (min-width:768px) and (max-width:900px) {
    .slider-main .nivo-caption .title { font-size:28px;}
    .slider-main .nivo-caption .nivo-caption-content { max-width:500px;}
    .home.has_trans_header .slider-header-layout3 .nivo-caption { top:80%;}
    }

    span.desc{display: none;}
    #sidebar .widget {background:#939393 !important;}
    #sidebar #searchform #s { color:#ffffff !important;}
    .header #simple-menu .fa-bars { color: #ff3f00 !important;}
    #sidebar .widget .widgettitle, #sidebar .widget li a, #sidebar .widget a, #sidebar .widget label { color:#000 !important;}
    span.widget_border { background:#000 !important;}

    @media screen and (min-width:901px) and (max-width:1023px) {
    .slider-main .nivo-caption .title { font-size:28px;}
    .slider-main .nivo-caption .nivo-caption-content { max-width:500px;}
    .home.has_trans_header .slider-header-layout3 .nivo-caption { top:70%;}
    }

    @media screen and (min-width:1024px) and (max-width:1160px) {
    .slider-main .nivo-caption .title { font-size:32px;}
    .slider-main .nivo-caption .nivo-caption-content { max-width:500px;}
    .home.has_trans_header .slider-header-layout3 .nivo-caption { top:80%;}
    }

    @media screen and (max-width:1024px) {
    #footer.footer-type3 .rowfooter { margin:0;}
    }

    #209480
    Sonal S SinhaSonal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30793
    • Total: 30793
    Member since: August 16, 2013

    Hi,

    Kindly use this CSS to resolve tablet/landscape screen issue.

    @media screen and (min-width:1161px) and (max-width:1365px) {
    .slider-main .nivo-caption .title { font-size:32px;}
    .slider-main .nivo-caption .nivo-caption-content { max-width:500px;}
    .home.has_trans_header .slider-header-layout3 .nivo-caption { top:80%;}
    }

    Regards,
    Dave

    #209493
    NigelNigel
    Participant
    • Topics: 174
    • Replies: 314
    • Total: 488
    Member since: March 17, 2016

    perfect, many thanks

    #209494
    Sonal S SinhaSonal S Sinha
    Moderator
    • Topics: 0
    • Replies: 30793
    • Total: 30793
    Member since: August 16, 2013

    Welcome 🙂

    Regards,
    Dave

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