Block Logo in mobile

Home Forums All Other Themes Block Logo in mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #151403
    Andreas Pohl
    Participant
    • Topics: 4
    • Replies: 15
    • Total: 19
    Member since: May 1, 2020

    My header logo works great on the desktop version – on the mobile version it looks like crap.

    How is it possible to hide it in the mobile Version? I saw a solution for some othere theme here on the forum – you have to add

    .nivo-caption .slidebtn { display: block !important;}

    at customCSS – this unfortunately does NOT work with my theme (meditation)

    What do I have to do?

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

    Hi,

    Kindly show us your website URL please?

    Regards,
    Chris

    #151570
    Andreas Pohl
    Participant
    • Topics: 4
    • Replies: 15
    • Total: 19
    Member since: May 1, 2020
    #151633
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24112
    • Total: 24112
    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:767px) {
    .home.has_trans_header.page .header {
        background: rgba(205,115,153, 0.5) !important;
    }
    }

    Regards,
    Chris

    #151643
    Andreas Pohl
    Participant
    • Topics: 4
    • Replies: 15
    • Total: 19
    Member since: May 1, 2020

    Great solution, thanks

    #151644
    Andreas Pohl
    Participant
    • Topics: 4
    • Replies: 15
    • Total: 19
    Member since: May 1, 2020

    BUT its ony working for the frontpage, not for the other pages

    #151669
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24112
    • Total: 24112
    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:767px) {
    .header {
        position: relative !important;
        background: rgba(205,115,153, 0.5) !important;
    }
    }

    Regards,
    Chris

    #151779
    Andreas Pohl
    Participant
    • Topics: 4
    • Replies: 15
    • Total: 19
    Member since: May 1, 2020

    Two more issues:

    1. https://ibb.co/M2c5SBY the leftside of the left footer column is cut off

    2. I cant change the background (its too dark on mobile) for several pages

    #151811
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24112
    • Total: 24112
    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) {
    #footer .rowfooter { margin:margin: 20px 0 !important;}
    body { background:#fff !important;}
    }

    Regards,
    Chris

    #151884
    Andreas Pohl
    Participant
    • Topics: 4
    • Replies: 15
    • Total: 19
    Member since: May 1, 2020

    The colors look good, thanks a lot. BUT the leftside of the left footer column is still cut off, please see this picture to understand what I mean: https://ibb.co/M2c5SBY

    Brgds,
    Andreas

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

    Hi,

    Remove:

    @media screen and (max-width:479px) {
    #footer .rowfooter { margin:margin: 20px 0 !important;}
    body { background:#fff !important;}
    }

    Add this new code:

    @media screen and (max-width:479px) {
    #footer .rowfooter { margin:20px 0 !important;}
    body { background:#fff !important;}
    }

    Regards,
    Chris

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