Hide Header on Mobile

  • Resolved Bob

    (@compumec)


    8 years, 10 months ago

    Hello,
    Can you tell me what css to use for hiding my header images on screens smaller the 768px?
    Thank you,
    Bob-

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

  • Dear Bob,

    Thank you for asking.

    Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css? 

    @media only screen and (max-width:767px){

  .header-image{
    display: none;
  }

}

    If it doesn’t give any changes, try to clear your web browser’s cache, then reload your page.

    Regards,
    Kharis

    Thread Starter Bob

    (@compumec)

    Kharis,

    Thanks for the follow up.

    I tried that, and the header image still shows when the browser window is re-sized.

    I did clear all history and tried it on multiple browsers.

    Here is a link to my page.
    https://02ba63c.netsolhost.com/cabinetry/contact/

    Thank you,
    Bob-

    Dear Bob,

    Try the following, please. 

    @media only screen and (max-width:767px){

  .header-image{
    display: none !important;
  }

}

    Regards,
    Kharis

    Thread Starter Bob

    (@compumec)

    Kharis,

    Nice Job!
    That did it.

    Thank you,
    Bob-

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hide Header on Mobile’ is closed to new replies.