Support » Plugin: T(-) Countdown » Width problem with timer: c-3p0 style

  • Resolved dbartos

    (@dbartos)


    Hello, I have the timer mostly figured out but am stuck on a little problem with the width of it. I’m using the c-3p0 style and omitting weeks, also I am using it in a product page as a shortcode.

    The issue is that there is extra space on the timer for the ones that have a countdown where the “Days” are less than 100. There’s essentially an extra digit of space left over so the spacing is off. I’m not allowed to provide the page as the site is under private development, but the screenshot provided can show exactly what I mean.

    The way I see it there are 2 options, to have the width of the timer adjust automatically depending on the contents, or to center the countdown digits within the timer. Can you provide any assistance? I tried searching through posts but there were none about width.

    Here is the screenshot link: https://imgur.com/a/M9kub

    Thank you

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor twinpictures

    (@twinpictures)

    You are correct, the styles are a bit outdated. There are some responsive styles that do auto-adjust, but we’ll take a look at all the styles and re-visit the css to have them work more responsively. We’ll post back when we have something for you to test. Thank you for the feedback.

    Hey thanks for the quick response. I was able to band-aid fix it for now. In-case anyone else runs into this, I’ll post what I did.

    Since the display uses a different class depending on whether it needs 3 digits or 2, I was able to apply additional margin to only the 2 digit “days” portion. Since that field is on the left it pushes everything over to the right and “centers” it. The actual margin value might have to be adjusted but that’s the basic idea.

    I used this code:

    .c-3po-days_dash{
    	margin-left:26px !important;
    }

    This way only timers with 2 digits will be bumped right, the ones with 3 will still use their separate class of “c-3po-days_trip_dash”. I’ll mark this as resolved since my issue is basically fixed.

    Plugin Contributor twinpictures

    (@twinpictures)

    I think we have something for you. We’ll start with the c-3po styles:
    http://spacedonkey.de/3061/t-countdown-omitweeks-width-issue/
    We have updated css files, and they can be downloaded directly from GitHub at:
    https://github.com/baden03/t-minus-countdown

    Please let us know if this is pushing things in the correct direction!

    Yes this is great, exactly what I had pictured. It also illustrates another issue I ran into when viewing it on a phone. The actual digits seem to go out of the white box slightly *Correction- The actual digits don’t go out of the white box but go right to the edge and the white glowing text effect makes it appear outside when it shrinks, to remedy that I just increased the size of the boxes slightly.

    • This reply was modified 1 week, 6 days ago by  dbartos.
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.