MOBILE RESPONSIVE HEADER / BANNER ISSUE ON Healing Tough Pro

[Rachel]

Hi, the logo in the header is displaying very large in mobile responsive mode. Can this be adjusted for mobile mode? I can’t access this section to edit it in Elementor responsive mode.

https://greendoctors-london.org/

Also the slider image & text has poor legibility in mobile mode, how can I access this slider content to amend for mobile only?

Thanks
Kirk

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.logo {
    max-width: 80px;
}
.slider-main .nivo-caption .slidedesc {
    font-size: 12px;
    margin-top: 5px;
    width: 60%;
    line-height: 18px;
}
}

Regards,
Dave

[Rachel]

Thanks, that’s worked for mobile responsive, but not tablet. The logo is still too large & slider text runs over slider image still on Tablet view?

Can I apply this to tablet as well? I can’t see in the code the device type?

Thanks

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:1079px) {
.logo {
    max-width:70px !important;
}
}

Regards,
Dave

[Rachel]

Thanks, I’ve sorted the mobile responsive, but the slider text on the tablet responsive doesn’t seem to change when I change the numbers in the code, can you check the fully code please? thanks

span.desc{display: none;}
@media screen and (max-width:479px) {
.logo {
max-width: 80px;
}
.slider-main .nivo-caption .slidedesc {
font-size: 8px;
margin-top: 6px;
width: 60%;
line-height: 11px;
}
}
@media screen and (max-width:1079px) {
.logo {
max-width:70px !important;
}

.slider-main .nivo-caption .slidedesc {
font-size: 16px;
margin-top: 5px;
width: 70%;
line-height: 27px;
}
}

[Sonnal S Sinha]

Hi,

We did not find any issues on tablet view.

Can you send us the screenshot of your issues? Upload your screenshot on http://imgur.com/ and paste the share url here.

Regards,
Dave

[Rachel]

Sorry, tablet view is fine, it’s the mobile view that is the problem. See screenshot. The code you gave me isn’t controlling the banner copy as it should.

https://imgur.com/5VyQReh

thanks

[Sonnal S Sinha]

Hi,

Kindly replace this new CSS in custom css box

span.desc{display: none;}
@media screen and (max-width:479px) {
.logo {
max-width: 70px;
}
.slider-main .nivo-caption .slidedesc {
font-size: 8px;
margin-top: 6px;
width: 50%;
line-height: 11px;
}

}

@media screen and (min-width:480px) and (max-width:1079px) {
.logo {
max-width:70px !important;
}

.slider-main .nivo-caption .slidedesc {
font-size: 16px;
margin-top: 5px;
width: 70%;
line-height: 27px;
}
}

Regards,
Dave

[Rachel]

Many thanks.

That’s done it.

Best wishes.

[Sonnal S Sinha]

Hi,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/25/

Regards,
Dave

[Author]

Posts