MOBILE RESPONSIVE HEADER / BANNER ISSUE ON Healing Tough Pro

Home Forums All Other Themes MOBILE RESPONSIVE HEADER / BANNER ISSUE ON Healing Tough Pro

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #149336
    Rachel Kirk
    Participant
    • Topics: 39
    • Replies: 91
    • Total: 130
    Member since: October 25, 2019

    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

    #149374
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25854
    • Total: 25854
    Member since: August 16, 2013

    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

    #149405
    Rachel Kirk
    Participant
    • Topics: 39
    • Replies: 91
    • Total: 130
    Member since: October 25, 2019

    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

    #149407
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25854
    • Total: 25854
    Member since: August 16, 2013

    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

    #149409
    Rachel Kirk
    Participant
    • Topics: 39
    • Replies: 91
    • Total: 130
    Member since: October 25, 2019

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

    #149427
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25854
    • Total: 25854
    Member since: August 16, 2013

    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

    #149428
    Rachel Kirk
    Participant
    • Topics: 39
    • Replies: 91
    • Total: 130
    Member since: October 25, 2019

    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.

    View post on imgur.com

    thanks

    #149432
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25854
    • Total: 25854
    Member since: August 16, 2013

    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

    #149433
    Rachel Kirk
    Participant
    • Topics: 39
    • Replies: 91
    • Total: 130
    Member since: October 25, 2019

    Many thanks.

    That’s done it.

    Best wishes.

    #149454
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25854
    • Total: 25854
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Dave

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