Header not re-sizing in mobile

  • Hi,

    Everything seems to look on my mobile phone except for the header. I am using a child theme and the only custom CSS I have added to that child theme in regards to the header is:

    .site-header-main { min-height:350px; }

    Reason being – I couldn’t get the header to the size I wanted and for some weird reason it just kept getting smaller and smaller every time I tried to fix it in the “customizer”. It’s ok now on my website, but I am wondering if that custom CSS is interfering with the mobile header.

    My website is: valeriemartinphotography.ca

    Thanks!
    Valerie

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

  • Hi Valerie,

    I love the puppies!! I have a black and brown doxie like the one in your gallery. <3

    You might want to write that custom CSS as a media query.

    So adding something like this bit before it:

    @media screen and (min-width: 800px) {
.site-header-main { min-height:350px; }
}

    Try that and see if it works better for you!

    Thread Starter _valeree

    (@_valeree)

    Hi Melissa,

    Thank you! They are such sweet dogs ??

    Ok, so now I feel really silly! The CSS you gave me didn’t work so I went into “Customize” and changed the header from “cover” to “contain”. I swear I tried this before and it didn’t work. So it now looks good on my mobile except from the crazy padding underneath the header.

    It would be great if you could help me out with this issue also!

    Thanks,
    Valerie

    Hi Valerie,

    Sure! If you’re using the most current version of Make, in the Customizer go to Layout → Header and you should see a checkbox to remove the padding under the header.

    Hope that helps!

    Thread Starter _valeree

    (@_valeree)

    Hi Melissa,

    Yup tried that but there is still quite a bit of padding on my mobile…

    Is there another way to fix this?

    Thanks!
    Valerie

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header not re-sizing in mobile’ is closed to new replies.