Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #333158

    Hi, I have a Header Custom Background Image that displays fine on the laptop view but looks bad on the mobile and tablet. I’m trying to hide it in mobile view by giving it a special CSS for the mobile, but it has no effect. Could you please advice to what I’m doing wrong. I’ve put this in the Child style sheet:

    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */

    .header_color .header_bg {
    display:none !important;
    }

    }

    Thanks
    /Michael

    • This topic was modified 9 years, 9 months ago by musklick.
    #333496

    Hey musklick!

    I cannot see a background image are you trying to hide second logo? If so, please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
    .second-logo { display: none; }}

    Cheers!
    Yigit

    #333674

    Hey Yigit! Thanks for your reply. I didn’t get that to work. The logo still displays. What I really want is to hide the gray bar that is behind the menu on laptop view. On the mobile the second logo moves down and is covering that line and it just looks crazy. The line is a background image. But if I can’t hide the line I’m happy to hide the second logo instead. But nothing happened with this fix.
    I can see the code when I inspect it in Firefox but it is crossed out.

    Thanks
    /MIchael

    • This reply was modified 9 years, 9 months ago by musklick.
    #334435

    Hi Michael!

    I’m not sure what elements you are referring to (this?), can you create a screenshot/mockup of what would you want to achieve?

    Cheers!
    Josue

    #334556

    Hi Josue, thanks for your reply. Yes you are correct, it’s the gray area you’ve indicated that I want to hide. However I’ve confused you because I got Yigit’s fix to work by adding “!important” after so you could not see the second logo, then I tried !important on the background and managed to hide that. So it’s working now but the logos on the mobile is a little too big. Could you please advice how to adjust them, smaller, and keep their proportions.

    Thanks
    /Michael

    • This reply was modified 9 years, 9 months ago by musklick.
    #334568

    Hey Michael!

    Try with this:

    @media only screen and (max-width: 479px) {
        .responsive .logo img {
            top: 35px;
            height: 45px !important;
        }
        .responsive .second-logo img {
            top: 0px;
        }
    }

    Regards,
    Josue

    #334570

    Hey Josue, seems it only makes the main logo move down (35px?) and cuts it off a little. The logos are the same size.

    Thanks
    /Michael

    #334577

    Hey Michael!

    Use this code instead:

    @media only screen and (max-width: 479px) {
        #wrap_all .logo img {
            top: 35px;
            height: 45px !important;
        }
        #wrap_all .second-logo img {
            top: 0px;
        }
    }
    

    Cheers!
    Josue

    #334667

    Thanks Josue, it looks great now :)

    /Michael

    #334694

    You are welcome Michael, glad to help :)

    Regards,
    Josue

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