Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 9, 2014 at 12:45 pm #333158
    musklick

    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 10 years, 1 month ago by musklick.
    October 9, 2014 at 11:48 pm #333496
    Yigit

    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

    October 10, 2014 at 6:21 am #333674
    musklick

    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 10 years, 1 month ago by musklick.
    October 12, 2014 at 5:13 am #334435
    Josue

    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

    October 12, 2014 at 10:11 pm #334556
    musklick

    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 10 years, 1 month ago by musklick.
    October 12, 2014 at 11:10 pm #334568
    Josue

    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

    October 12, 2014 at 11:16 pm #334570
    musklick

    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

    October 13, 2014 at 12:22 am #334577
    Josue

    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

    October 13, 2014 at 7:21 am #334667
    musklick

    Thanks Josue, it looks great now :)

    /Michael

    October 13, 2014 at 8:17 am #334694
    Josue

    You are welcome Michael, glad to help :)

    Regards,
    Josue

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