Okay
  Public Ticket #1352344
@media only display none
Closed

Comments

  •  6
    David started the conversation
    October 31, 2017 at 12:20am

    Hi,

    I've created a landing page that looks good on PC, but on mobile @media only is adding header and footer space.

    I would like to remove this space from both header and footer.

    I tried this in my custom CSS tab in Visual Compser:

    @media only screen and (max-width: 1000px) and (min-width: 1px)
    #header-space[data-header-mobile-fixed="1"] {
        display: none!important;
    }

    But I get an "expected L brace at line 13, col 1 error.

    Thanks!

  •  6
    David replied
    October 31, 2017 at 12:21am

    I currently have the following code on https://essentialodessa.com


    #header-space , #header-outer {
        display: none;
    }

    #header-secondary-outer {
        display: none;
    }

    #footer-outer {
        display: none;
    }

    thanks

  •  8,470
    Tahir replied
    October 31, 2017 at 12:18pm

    Hey Again, The media query needs to be enclosed in a curly brace too. 

    The correct code is below.

    @media only screen and (max-width: 1000px) and (min-width: 1px){
 #header-space[data-header-mobile-fixed="1"] {
        display: none!important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  6
    David replied
    October 31, 2017 at 3:32pm

    Awesome, that worked.

    For the life of me I can't figure out how to hide the footer area on Mobile/Responsive. Do you have the CSS for that? Again, it looks great on PC with this:

    #footer-outer {
        display: none;
    }

    But not on mobile.

    Thank you so much. Great support.

  •  8,470
    Tahir replied
    November 1, 2017 at 10:12am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #footer-outer {
    display: none !important;
}

    Thanks

    ThemeNectar Support Team 

  •  6
    David replied
    November 1, 2017 at 2:50pm

    Hey, Tahir.

    I did that. Still the same. It works fine at certain widths, but the then shows a black footer area at certain break points. That's why I thought maybe it was an @media issue. See attached!

  •  5
    Brendan replied
    November 1, 2017 at 11:24pm

    @David that's because there isn't enough content to fill the screen at smaller widths. That black area isn't a footer.