CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Dave Collins
Dave Collins

Reputation: 1087

Adding .hidden-phone in an existing css file to hide background image

I'm sure there is an easy answer to this one...

Using Twitter Bootstrap, I have this in my style.css.erb file:

.login_page body {height:100%;
        max-width:inherit;
        margin:0 20px;
        background-image: url(<%= image_path 'oap_dotlogo.png' %>);
        background-repeat: no-repeat;
            background-position: 5%, 80%;
        background-color: #E3F5FD;
    }

That is great, except on a phone where the background logo is a pain in the ass. I'd like to drop that logo on a phone.

I see that bootstrap-responsive.css already defines the .hidden-phone:

@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

So, how do I modify the style.css.erb so that the background-image tag has the .hidden-phone class?

I've tried a few permutations of adding .hidden-phone in the style.css.erb but nothing seems to work - I must have the syntax wrong.

Thanks! Dave

Upvotes: 1

Views: 9305

Answers (2)

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

Sounds like you're confusing CSS and HTML here. When you say:

[H]ow do I modify the style.css.erb so that the background-image tag has the .hidden-phone class?

... you can't add a class to a CSS declaration. You don't actually want to hide your element (the body in this case), rather at small screen sizes you want to modify the background property. So, within the media query that you already have, add this:

@media (max-width: 767px) {
  .login_page body { background-image: none; }
  ...
  all your other small-screen styles
}

Then, the default will be to show your background-image and you are removing it for small screens. If the image is large, you might consider a mobile-first approach. i.e. do the opposite, as @po228 mentioned - only add the background-image for larger viewport widths.

Upvotes: 2

po228
po228

Reputation: 90

Looks like you were very close. To define styles that won't be displayed on a phone you need to use min-width, not max-width. Try the following:

@media only screen and (min-width: 768px) {
    .login_page body {
        background-image: url(<%= image_path 'oap_dotlogo.png' %>);
        background-repeat: no-repeat;
        background-position: 5%, 80%;
    }
}

Upvotes: 0

Related Questions