HVAC theme slider text overlap

[Nigel]

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

[Sonl Sinha]

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

[Nigel]

thanks, I’ll edit these parameters

[Sonl Sinha]

Okay

[Nigel]

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

[Sonl Sinha]

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

[Nigel]

perfect, many thanks

[Sonl Sinha]

Welcome 🙂

Regards,
Dave

[Author]

Posts