Viewing multiple clocks on Mobile site

  • Resolved robbob37

    (@robbob37)


    10 years, 5 months ago

    Hi there,

    I am using the Coolclock widget and looks great but I have a problem with the mobile display. You may remember that a little while ago I asked to have multiple clocks positioned next to each other which works well but then on a mobile site they are overlapped on each other. Is there a way to fix this or to put a line of code in that says that if a mobile site then just don’t display the clocks? Here is the website so you can see my problem…https://victornoble.co.uk/

    Thanks

    https://www.ads-software.com/plugins/coolclock/

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

  • Hi robrob37, yes I remember… You currently have the style rule

    #main-top .coolclock {
  width: 14.28%;
  float: left;
}

    To prevent the overlap, you can extend that rule with

    min-width: 100px;

    which will make overflowing clocks drop to a second line.

    If you really want to hide them below a certain screen width, you can do this with an @media rule like:

    @media(max-width:768px){
  #main-top .coolclock {
    display: none;
  }
}

    Thread Starter robbob37

    (@robbob37)

    Hi RavanH,

    Once again thanks for the quick and spot-on support! In the end I decided to just hide the clocks as it kept it a bit cleaner due to the amount that there are!

    Thanks again

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Viewing multiple clocks on Mobile site’ is closed to new replies.