Link to home
Start Free TrialLog in
Avatar of Fajer39
Fajer39

asked on

CSS problem on mobile phones

Hello, in this site goo.gl/p16ngm I don't know why on mobile phones are glyphicon overlapping with the text. Glyphicon is inside a span which is inside an h3.

I tried this quick fix bellow[only on star to see the result], but it works only when I resize windows manually to a mobile size, but when I try it on actual phone [galaxy s4] or thought GdevTools device mode, it doesn't work and glyphicons are still overlapping the text.
@media (max-width: 800px) {
  .reference span.glyphicon.glyphicon-star {
    margin-right: 25px;
  }
}

Open in new window


Here is the screenshot http://awesomescreenshot.com/0514pj3iaa
SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Try this:

  .glyphicon.glyphicon-star{
    min-width: 22px;
    display: inline-block;
    float: left;
  }

Open in new window

Avatar of Fajer39
Fajer39

ASKER

Thank you very much guys. Ok I will add that.