Need to center/middle align element and fix its look

#1

Hi there everyone!

I want to build a project timer so I can track time worked on projects for people. I found this gorgeous clock timer (I know it’s running backwards to what I need but babysteps) and I’d like to use it as my base. I’m having a problem setting this up on the page however.

First, The page (You need to click on the tracker tab of the main part of the page to get to the problem element.

My first issue is that even though I placed it in it’s own row, it’s climbed up into the section-title div. I need to bring it down into it’s own space and I need to horizontally center it.

My second issue is the placement of the numbers themselves and the handles on either end of the timer. Instead of being vertically centered like in the fiddle, mine have sagged to the bottom.

If anyone can help me resolve these two issues, I’d be incredibly grateful. Thanks for your time!

#2

Hi,

In the Codepen the countdown clock is a direct child of the body and the position is in the center of its nearest parent with a position. In the Codepen that is the viewport.

First issue:
In your page the parent with position to the countdown clock has no content in flow as the clock is centered by position absolute, as in the Codepen, so the parent collapse to its min-height 1px.
– You could give it a taller min-height to see how the clock center in that height.

Then the parent has a max-width of 33.333% of the grandparent.
– You could change the max-width to 100% and se how the clock center in that width.

Second issue:
The Codepen has the default box-sizing content-box with height 112px + padding 24px + 24px = 160px, but your page has box-sizing border-box so the total height is the 112px including padding.
– You could change the box-sizing (or add 2*24px to the 112px height) for the parent of the clock and see the labels and the handles move as you expected.

You’re welcome, it didn’t take long. Posting this took more time. :slight_smile:

#3

It’s absolute positioned so that is contributing to the misplacement.
EDIT: Erik explained that in detail. :slightly_smiling_face:

The codepen you linked to has invalid code in it. There are list items in a div, that div should be a ul. Then you will need to remove the default styling for list items.

Should be this…

<div id="countdown">
  <div id='tiles'></div>
  <ul class="labels">
    <li>Days</li>
    <li>Hours</li>
    <li>Mins</li>
    <li>Secs</li>
  </ul>
</div>

Then add the last three rules shown below…

#countdown .labels{
  width: 100%;
  height: 25px;
  text-align: center;
  position: absolute;
  bottom: 8px;
  list-style: none;
  margin:0;
  padding:0;
}

I would probably restyle it and keep elements in the flow, do away with as much of the absolute positioning as you can.

#4

Good noticing that! I didn’t look that close, I admit. :blush:

#5

Hi there guys and thanks so much for your help! I’ve made the instructed changes from both posts and I’ve got that sorted, I believe: http://schw.im/timer.html

This leads me to an epiphany that probably was obvious to everyone else. It’s not very responsive. Scrunching the page leads to it disappearing off the page.

If I wanted to make this shrink on page scrunch, would this be possible? Would I be swapping pxs for %s?

#6

Rule #1 of responsiveness: avoid the use of fixed widths where they can compromise responsiveness.

examples:

#timer { width:365px; }  /* fixed width is not responsive */
change to:
#timer { max-width:365px; }  /* allows box to become narrower */

#timer .labels li { width:102px; }  /* fixed width is not responsive */
change to: 
#timer .labels li { width: 30%; }  /* (~estimate) width scales narrower as width of parent becomes narrower. */

#timer #tiles span { width:92px }   /* (line 7032) fixed width is not responsive */
change to:
#timer #tiles span { width: 25% }  /* a guess */

there are probably other items that need to be adjusted such as vertical padding.