1

I have a strange problem with this website http://hashgurus.com/default.aspx/#countries in multiple devices. For bigger screens like in ipad and desktop computers clicking the country links-Canada, Netherlands, Germany, Britain - works perfectly fine.

But if the screen is small like iphone/android these country links doesnot work out. I am clueless as to why it behaves differently in smaller screen sizes. Any pointers where I should be checking the code?

m Raj
  • 287
  • 1
  • 2
  • 8
  • Are you using other code to make it responsive? I checked every css element in firefox console but I can't find the problem but I get 3 errors in the console. **error 1:** is a font error on this css file`font-awesome.min.css:4:14`. The other 2 are problems with google analytics – Vinc199789 Feb 22 '15 at 09:14
  • I also get an error that the site can't find this: http://hashgurus.com/fonts/fontawesome-webfont.woff – Vinc199789 Feb 22 '15 at 09:24
  • The problem appears to be that on a small screen, when `Top Twitter Trends in Egypt` sits below the flags, the two containers overlap. This effectively gives the flag div a negative z-index - so the links won't work. You need to sort out the height of the divs to prevent overlaps. – sideroxylon Feb 22 '15 at 09:34

2 Answers2

2

You need to add clear:both to the CSS for the div containing the 'Top Twitter Trends in Egypt' widget. That will fix it. This is because the flags have been floated, which removes them from the flow of the page.

<div class="col-lg-3 col-md-3 col-sm-3" id="widgetplace" style="clear: both;">

EDIT at request of OP:

Instead of changing the CSS for the current version, add this:

@media screen and (max-width: 900px) {
   #widgetplace {
        clear: both;
   }
}

This will add the required code only if the device width is less than 900px

sideroxylon
  • 4,338
  • 1
  • 22
  • 40
  • There are actually 3 divs. first div has country flags. second div has widget which is an iframe and the third div is also an widget with google-ad. if i remove these two widgets it clearly works. but i want these widgets to be placed in vertical banner. is there a way? your solution has pushed the widget to the next row. it looks good in mobile device but in a desktop the right side looks blank. – m Raj Feb 22 '15 at 10:02
  • You can solve it with a media query, only add `clear:both` if the screen width is less than 900px. I'll edit the answer. – sideroxylon Feb 22 '15 at 10:07
  • i added this. @media (max-width:500px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; clear: both; } .col-lg-12 { width: 100%; clear: both; } -----------------is this ok? – m Raj Feb 22 '15 at 10:11
  • It prevents an element being floated on either side of another element, forcing the second element below - without it, the second element can occupy the same space as the floated element, with unfortunate results. See [HERE](http://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do) – sideroxylon Feb 22 '15 at 10:21
  • Glad to have been able to help. By the way, you seem to have the Chinese flag for Canada. – sideroxylon Feb 22 '15 at 10:39
0

Found the problem. If you are in a small screen there is a div with the id advertisement. when I set that to display:none; it works so a div is placed over the links but it is empty so you don't see it is there.

I discovered it by going in small screen and than right click on a counrty link and than click on element-inspect. When you do that on small screen you go to the advertisement div en when you do it on a large screen you go the the right link.

Vinc199789
  • 1,046
  • 1
  • 10
  • 31
  • what is the solution? what should i be doing? – m Raj Feb 22 '15 at 10:02
  • DO you want to hide the advertisement when the screen is small? Than can you use the css `@media` to hide the advertisement when the screen is small and show it when the screen is large. – Vinc199789 Feb 22 '15 at 10:10