Css is the worst

1

I’m having a nightmare! Can someone tell me why I can never get things to centre within the page / div. Every project I do has the same problem. Things won’t centre. there is always something that is off. CSS is the bane of my existence. I’ve watched so many tutorials (flexbox, grid, css zero to hero… on and on ) but still things won’t centre. It’s driving me mad. Why is there not a gui version of css so I don’t have to deal with it’s nonsense. I’ve spent more time on positioning than I have on html, javascript, es6, react and redux combined and I still can’t get it to do what I want. It should be simple. I have a div which is a circle and text at it’s centre. But no matter what “fix” I try it’s always off…

I’ll include my code so you can see what I am dealing with. Please can someone help me out. CSS is so frustrating that I want to give up on development just so I don’t have to deal with positioning ever again.

For some reason when I have transferred it from my local environment to codepen nothing is visible… but you should be able to see the css.

https://codepen.io/zelig85/full/oNjxdjN

2

I think I found the bug:

class Session extends React.Component {
  render() {
    return (
      <div>
        <p id="session-label">Session Length</p>
        <button
          id="session-decrement"
          onClick={this.props.handleInceaseDecrease}
          className="sessionButtons"
        >
          Reduce
        </button>
        <div id="session-length">{this.props.length}</div>
        <button
          id="session-increment"
          onClick={this.props.handleInceaseDecrease}
          className="sessionButtons"
        >
          Increase
        </button>
      </div>
    ); 
  }
}

You forgot the parentheses at the end of this component.

So it did not render anything in codePen

3

I went through it line by line and can’t see anything missing now but it’s still not loading. Which parentheses were you referring to

4

Upload the code back to codePen :smiley:

5

Yeah I deleted the one that was there because I couldn’t get it to work. I have done another one now and updated the link in the post

6

It doesn’t work because you’re not rendering anything at all, you need to attach the component to a DOM node - https://reactjs.org/docs/react-dom.html#render, I think you’ve failed to copy a line or two of code across from your local environment

7

Yeah that was something that happened during the problem solving process. If you check now the background color is now there… so getting better.

8

Right okay. Everything Is working now. But as you can see the CSS is a joke. Primarily the main issue I was struggling with was the CSS. In the circle div that has the timer in it the 25:00 won’t centre. The last attempt I made was with Flexbox I think but this was the fourth or fifth thing I had tried. Also you will notice that the button beneth that element is slightly off to the side… I don’t understand why that’s the case either.

9

You apply flex properties to a container, and they cause the direct children to “flex” (flexibly fill the space) according to the rules you’ve specified. You have applied the rules to the child rather than the container.

#time-left {
  /* ...current properties here */
  display: flex;
  align-items: center;
  justify-content: center;
}

#timer-clock {
  /* remove the properties above from here, they're in the wrong place */
}
10

Okay that’s simple and makes sense. Excellent. Thank you. Do you also know why the button beneath is off to the left slightly

11

Not sure on that, but I think it is box sizing, which when I applied the fix it fixed a few very slight issues :

Browsers, by default, will calculate the size as the height/width plus padding and border. SO if you say something is “height: 300px” then you add a border of 3px round everything then the total height is 306px.

You can (and should, it will keep you a little bit more sane) adjust this behaviour, which is couterintuitive and bad. Put this at the top of the CSS:

*, *::before, *::after {
  box-sizing: border-box;
}
1 Like