CSS `place-content` and `place-items` are Stripped Using a CSS Block

Hikin' Mike

Just playing around with a slideshow. It is supposed to center a Slideshow Title in top/bottom and left/right. I placed this on a CSS Block:

.sm-user-ui .sm-tile-title {
  display: grid;
  place-content: center;
}

.sm-user-ui .sm-tile-info .sm-tile-title {
  color: white;
  font-size: 3em;
}

.sm-user-ui .sm-tiles-info-over .sm-tile-info {
  bottom: 50%;
  padding: 1em 0;
}

.sm-user-ui .sm-tile-content > .sm-tile-info {
  background: rgba( 0, 0, 0, 0 );
}

.sm-user-ui .sm-tile-caption {display: none;}

It doesn't center left/right because place-content: center; is stripped. I placed the CSS in my theme's custom CSS section and it works.

Jtring

I'm no expert here, but looking at https://developer.mozilla.org/en-US/docs/Web/CSS/place-content, a few thoughts come to mind. Does it work if you use justify-content rather than place-content? If all you are doing is left/right positioning and don't care much about up/down, that's enough. Perhaps the SmugMug parser really expects two argument for place-content too. Would place-content: center center; work?

Hikin' Mike

@Jtring said:
I'm no expert here, but looking at https://developer.mozilla.org/en-US/docs/Web/CSS/place-content, a few thoughts come to mind. Does it work if you use justify-content rather than place-content? If all you are doing is left/right positioning and don't care much about up/down, that's enough. Perhaps the SmugMug parser really expects two argument for place-content too. Would place-content: center center; work?

Certainly I'm no expert either. The justify-content: center does work, but place-content: center center doesn't. As most things in CSS, there are several ways to "skin a cat" (my wife and kids hate that term).