Remove Header Image Slider from Mobile View

  • jendaddario

    (@jendaddario)


    8 years, 10 months ago

    I’d like to remove the header image from the mobile view of my website. The header image looks too large and odd when viewed from a phone, so I’d like to eliminate it all together. I’m having trouble figure out how to make this adjustment.

    http://www.redwhitedenim.com

    Thanks!
    Jen

Viewing 6 replies - 1 through 6 (of 6 total)
  • wbcomdesigns

    (@wbcomdesigns)

    8 years, 10 months ago

    Hello @jendaddario

    You can achieve this by applying following CSS code.

    @media(max-width:320px) {
   
.headerslider {
    visibility: hidden !important ;
}

.wrapper.section {
    margin-top: -460px !important;
}

}

@media(max-width:480px) {
   
.headerslider {
    visibility: hidden !important;
}

.wrapper.section {
    margin-top: -460px !important;
}

}

    Hope this will help.
    Thanks.

    • This reply was modified 8 years, 10 months ago by wbcomdesigns.
    • This reply was modified 8 years, 10 months ago by wbcomdesigns.
    • This reply was modified 8 years, 10 months ago by wbcomdesigns.
    Thread Starter jendaddario

    (@jendaddario)

    8 years, 10 months ago

    That worked, thank you SO much!!

    wbcomdesigns

    (@wbcomdesigns)

    8 years, 10 months ago

    welcome 🙂

    Thread Starter jendaddario

    (@jendaddario)

    8 years, 10 months ago

    I’m sorry – I actually thought this worked, yet when I looked again, I noticed it completely took away my header. My menu and the title of my blog are now missing. I just wanted to hide the image slider, but keep the title and the header.

    Is there a way to adjust the CSS to fix this?

    Thanks!
    Jen

    wbcomdesigns

    (@wbcomdesigns)

    8 years, 10 months ago

    Hello @jendaddario

    You can achieve this by applying following CSS code.

    @media (max-width: 500px)

.wrapper .section-inner {
    max-width: 100%;
    margin-top: 70px !important;
}

    Hope this will help.
    Thanks.

    Thread Starter jendaddario

    (@jendaddario)

    8 years, 10 months ago

    THANK YOU SO MUCH!!! I really appreciate your help.

    Is there any way to apply this same logic to a single post page? It works perfectly when visiting my home page, but when I click on an individual post (for example http://redwhitedenim.com/jewels-for-hope/) the white space where the header slider was is still showing in mobile view. Is there any way to delete this white space?

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

The topic ‘Remove Header Image Slider from Mobile View’ is closed to new replies.