Remove header from mobile devices

  • Resolved rtc

    (@rcyrus)


    12 years, 4 months ago

    I have a header that is shrinking on mobile devices so it looks bad. Is there a way to remover the header on mobile devices only and replace with text? I have tried a couple of mobile plugins, but they make the site less interesting and functional. I am using a responsive theme Openstrap, which is a child theme of Bootstrap. Any help appreciated!

    My site: onlyoption.info

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 4 months ago

    Have you used media queries before? You can add CSS for different screen sizes http://css-tricks.com/css-media-queries/

    Thread Starter rtc

    (@rcyrus)

    12 years, 4 months ago

    Thanks for the fast response. I must admit that I am not familiar with media queries at all. I read the post that you provided (thanks!). Would the CSS code look like this? Not sure what to put for mobile size so I am just using “mobile”. I want it to work on all mobile devices so that the header is gone and replaced by text. Thanks for your patience!

    @media max-width: mobile {
    #header-image {
    display: none;{
    content: “My Text Here”;
    font-style: italic;
    color: #666;
    }
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 4 months ago

    Not sure what to put for mobile size so I am just using “mobile”.

    It’ll be just like the examples in that post:

    /* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

    You probably want this:

    /* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 4 months ago

    Let’s see your website

    Thread Starter rtc

    (@rcyrus)

    12 years, 4 months ago

    I will try above now. Thanks!
    website: http://www.onlyoption.info

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 4 months ago

    E.g.:

    /* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

 header {
  background-image: none !important;
 }

}

    Thread Starter rtc

    (@rcyrus)

    12 years, 4 months ago

    Will try this now. Thanks!

    Thread Starter rtc

    (@rcyrus)

    12 years, 4 months ago

    This works! Thanks so much!

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

The topic ‘Remove header from mobile devices’ is closed to new replies.