Header floating on mobile site

  • Resolved markmck

    (@markmck)


    9 years, 1 month ago

    Hi there,

    regarding the mobile version of https://drmikeographer.co.uk , the header image is floating on the mobile version but sits nicely on the desktop version. I believe this is down to the code I’ve used;

    /* Header image */
    header{
    margin: 0px;
    padding: 0px;
    height: 15em;
    }
    .site-title { float: none; }

    The height was adjust appropriately to make it look like it sat directly above the top of the page, however I am assuming that the mobile devices are taking this same measurement which causes it to create large gaps around it.

    Is there better CSS that I can use that will still give me the exact same result I currently have, while also replicating across to the mobile version?

    Many thanks
    Mark

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi markmck. Try replacing the css you posted above with the following:

    /* reduce spacing above & below header image */
#header .group.pad {
    padding: 0
}
/* center header image */
.site-title {
    float: none;
    padding-bottom: 0;
}

/* retain header image spacing on mobile */
@media only screen and (max-width: 719px) {}
    .site-title {
        padding: 5px 0 0 !important;
    }
}
    Thread Starter markmck

    (@markmck)

    Dudeeee!

    You absolute legend!! Thankyou so much, that worked PERFECTLY!

    Thankyouuuu!!

    You’re welcome. Glad to help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header floating on mobile site’ is closed to new replies.