Also ran into something else.

On my larger monitor, it displays correctly:

But when I move the browser window to my laptop screen, the widget adds scrollbars. Because my laptop screen is smaller? How can I ensure the formatting will stay the same for any screen size?

Thanks in advance to anyone reading this

Hi @JZenker, I’m not sure if you’re still having issues with this but I messed around with the code and got it working pretty well by changing the width on the flip-card class to 100% instead of 443 px. When it was using the static width, the text was being centered for 443px even if it wasn’t able to be 443px wide. By making it percentage based, it will always be centered in the space that it has and you shouldn’t get those scrollbars.

The other thing I would add is object-fit: cover; to your front image element so that on smaller screen sizes it won’t stretch the image, it will zoom instead.

Hope this helps!

Thanks so much @nick.tosto will give it a shot!

Would that code look like this?

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px;
}

Would you also make the height 100% or just the width?

So the width issue was causing the text not to be centered and the scroll bars?

This should be added to the CSS? 

Trying to determine which element that should be added to

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

OR

.flip-card-front {
  background-color: #bbb;
  color: black;
}

Sorry for so many questions, just starting my professional development into CSS. It’s really helpful, thank you

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px;
}

^ yes for the width issue, that’s how I had it. I would leave the static height because there’s nothing setting a height boundary like there is for the width.

For the object-fit CSS, I would add it directly to the <img> html element so it looks like this:

<img src="https://s3.us-east-2.amazonaws.com/docebo.traceinternational/_Site+Images/tasa+widget.jpg" alt="Avatar" style="width:443px; height:300px; object-fit: cover;">

@nick.tosto Thank you for going above and beyond, really appreciate it

So much to learn from yawl….I have to implement one @JZenker.