Okay
  Public Ticket #1484755
gap below header on mobile fixed, now have gap at bottom
Closed

Comments

  •  1
    cburn started the conversation

    I found this code online to fix the gap below the header when page full screen rows is turned on for mobile devices.

    @media only screen and (max-width:1000px){
    #header-space { height: 44px !important}
    }

    NOW, there is a dark gap at the bottom.

    Thank you for your help.

  •  1
    cburn replied

    To clarify: Gray gap was at bottom of screen on the two screenshots even though it is ONE page. (I purchased the Salient template.)

    I removed the first code and replaced it with this:

    @media only screen and (max-width: 769px) {
    #footer { padding: 0 !important; }
    #footer .flex_column { margin-bottom: 0!important; }}

    Seemed to fix it. Gap is gone. If you can come up with a better fix, please let me know.

    **I turned the page full screen rows option off for mobile devices and now the large image on screenshot #1 doesn't stretch to the bottom of the screen on mobile phone--see screenshot #1A attached. I'd like to have the option of turning this off and I think the image should be covering the entire screen. Can you help with this related issue?

    Thanks!

  •  9,066
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
        .full-page-inner-wrap[data-name="home"] {
            height: 100vh;
        }
    }

    Thanks



    ThemeNectar Support Team 

  •  1
    cburn replied

    Thank you.

    No more gaps for sure. But the image looks too big vertically. Can it fit better with additional/different code? I wanted it to fit the size of the browser window vertically. What is the perfect size for an image used here?

  •  9,066
    Tahir replied

    Hey Again,

    Unfortunately the image cant be adjusted perfectly for both desktop and mobile  . The css provided earlier was just a hack and the image would look big since you want that row to expand to the Browser Height .

    Try adjusting the value below to experiment : 

    @media only screen and (max-width: 690px) {
        .full-page-inner-wrap[data-name="home"] {
            height: 89vh;
        }
    }
    

    Bes.t


    ThemeNectar Support Team 

  •  1
    cburn replied

    Much better. I like it. Thank you so much for your prompt and helpful reply!! I see why there are so many great reviews and comments about Support and well as the themes.

    I appreciate you!

  •  1
    cburn replied

    Just a thought...will the template updates overwrite this code that I've used?

  •  3,065
    Andrew replied

    Hi cburn,

    Apologies for the late reply.

    Adding the CSS to the salient options panel i.e. salient \ general settings - css script related - custom css code will preserve it over theme updates since that data is kept in the database.

    If you are adding the CSS to the theme files then use a child theme as and update will wipe out those changes.

    Hope this clears things up.

  • Shane replied

    Hi,

    I have a grey gap appearing between the MENU and my FIRST ROW when at tablet or mobile size.

    https://www.drsau.com/products/saf-tehnika/integra/

    These pages do not have a Nectar Slider and the first row is set to Full Width Background. 

    I've tried adding the code below, but it hasn't removed the gap.

    Is there something else I can try?

    Thanks!

    Shane

  •  9,066
    Tahir replied

    Hey Again,

    Try turning off the Header Resize Option and check : http://prntscr.com/iogd1q . 

    B.st


    ThemeNectar Support Team 

  • Shane replied

    Thanks very much Tahir!

    That worked perfectly :-)