Large Space under header image with additional css

  • Unknown's avatar
    winlandtribe · Member ·

    Hi,

    Below is what I have under Additional Css. I was trying to make header image responsive to mobile phone, or make whole image show. It worked, but in order for image to show correctly on a laptop, I had to 500px for masthead margin-bottom. Is there a way to have header image to show correctly on a laptop and a mobile phone?

    #parallax-bg {display: none;
    } .home #parallax-bg {display: block;} #masthead {
    margin-bottom: 50px;}
    .home #masthead {margin-bottom: 500px;}

    #parallax-bg { margin-top:100px;margin-bottom:0; background-size: 100%;max-width:100%;}

  • supernovia · Staff ·

    Hi winlandtribe, you didn’t include a link to the site, and layout changes are outside the scope of the CSS support we can offer.

    That said, if a change to a desktop layout is causing trouble with the mobile version, try wrapping the entire statement in CSS that will specify desktop-only sizing. For example:

    @media screen and (min-width 767px) {
/* your CSS goes here */

}

    You can adjust the sizing as needed, too.

    Hoping this helps!

  • The topic ‘Large Space under header image with additional css’ is closed to new replies.