CODEWITHSUNDEEP
htmlcssresponsive-design
rkb
rkb

Reputation: 544

my css doesn't work on mobile browers however it work on resized desktop browsers well

I'm using an plugin to add social sharing buttons on my site wondertacular.com. They looks great on wide screens but in small screens they look messed up. So I added following css to override default css and make those two big horizontal sharing buttons responsive.

@media (max-width: 600px) {
    .essb_displayed_both li {
        display: block;
        white-space: nowrap;
        margin-bottom: 20px !important;
    }
}

It works well when I resize desktop browsers (chrome and ff) to small width window but when I open this page in mobile browsers (chrome, FF, Opera) I didn't see any changes. It seems my css does not apply in mobile browsers. Please refer following screenshots -

Buttons are broken in mobile view http://itsfromindia.net/mobile.png

While they looks good on desktop browsers when resized to small window. http://itsfromindia.net/desktop.jpg

Please tell me whats going wrong.

Upvotes: 2

Views: 4281

Answers (2)

willanderson
willanderson

Reputation: 1568

You need to add a meta tag in the <head> that tells mobile browsers not to scale your site.

Add this in the <head> of your document and it should work as you're expecting:

<meta name="viewport" content="width=device-width">

More information here

Upvotes: 2

amandathewebdev
amandathewebdev

Reputation: 259

Did you try adding browser specific CSS, like:

-webkit- (safari/chrome)

-o- (opera)

-ms- (IE)

-moz- (firefox)

It helps make your CSS cross-browser compatible and can help on your mobile browsers. 

  @media (max-width: 600px) {
     .essb_displayed_both li {
         display: block;
         white-space: nowrap;

         -webkit-margin-bottom: 20px;
         -o-margin-bottom: 20px;
         -ms-margin-bottom: 20px;
         -moz-margin-bottom: 20px;
      }
  }

Not sure if that's the solution but it can't hurt!

Upvotes: 0

Related Questions