Using flex, resolving 2 issues

@PaulOB @ray.h

overflow: hidden; Is not working here.

1.) Hiding the overflow.


Doesn’t this mean, the middle?

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;

2.) Positioning the play button in the middle.

This worked to fix the 2nd issue:

.nav div:last-of-type {
    margin-bottom: 0;
    background:blue;
  }

I’m trying to fix this now.

Hiding the overflow.

It’s not working because you removed your width and height, so there was no overflow to hide.
The parent div .wrape just expanded to whatever was hanging out.

.wrape {
  position: relative;
  /*display:table; remove this*/
  width: 266px;  /* put this back*/
  height: 174px; /* put this back*/
  margin-top: 8px;
  overflow: hidden;
  background:red;
}

If you want to use flex or grid you should to start from the ground up and code accordingly for whatever layout model you choose.

Rather than using existing code and randomly replacing properties without an understanding of the new layout rules those properties will introduce.

That page was originally set up for using floats on the anchors.

1 Like

It’s all fixed here: #1

And if it’s not, you can explain further.

Yes, I know.

All I did mostly, was transfer over the html, and changed the CSS around.

Is there a CSS development technique that would let you easily transition from an older style technique to a newer one?

Probably couldn’t find a one size fits all technique. Reason being is that sometimes your html has to be structured in one way or another for the method your using.

Some of the old float layouts used extra wrapping divs and nested divs to create faux columns. An html structure like that could cause problems with grid or flex.

Then on the other hand flex just caused me to have to do some nesting of divs to get what I needed. But then that caused problems for the mobile view I wanted.

It’s best to look as far down the road as you can to see what you want to accomplish, then see if there are any limitations to the layout method you choose. Pick the path of least resistance.

5 Likes

I believe that’s about the 4th time that point has been explained now in various threads :slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.