Textpattern CMS

#1 2018-11-04 06:39:02

colak

Admin

From: Cyprus

Registered: 2004-11-20

Posts: 9,011

Website GitHub Mastodon Twitter

[SOLVED] css issue

I have a slight issue with the css which only appears after accepting the vimeo cookies. (example page)
You may notice that on mac browsers other than firefox, the videos under the Performances and the Seminar, have a large bottom margin. I’ve been pulling my hair about this for some time now. In contrast, this page renders the space just fine.

Any help would be much appreciated!

---

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

#2 2018-11-04 07:15:41

phiw13

Plugin Author

From: Japan

Registered: 2004-02-27

Posts: 3,078

Website

Re: [SOLVED] css issue

But but… on the page that works fine, the wrapper/container has a different ID

<div class="embed-container" id="vids">

On the other page, the video wrapper(s) have different ID’s (and they have different aspect ratios)

in your stylesheet (default.css. line 210 / 212) I see this:

.embed-container { padding-bottom: 56.25%; }
#vids { padding-bottom: 34%; }

Maybe you need to have different classes? one for 4×3 videos (e.g. the 1st vid on the failing page), one for those long and narrow vids (the two other vids on the failing page, the one on the page that works fine).

Last edited by phiw13 (2018-11-04 07:16:28)

---

Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

#3 2018-11-04 08:32:55

colak

Admin

From: Cyprus

Registered: 2004-11-20

Posts: 9,011

Website GitHub Mastodon Twitter

Re: [SOLVED] css issue

phiw13 wrote #314932:

But but… on the page that works fine, the wrapper/container has a different ID

<div class="embed-container" id="vids">...

On the other page, the video wrapper(s) have different ID’s (and they have different aspect ratios)

in your stylesheet (default.css. line 210 / 212) I see this:

.embed-container { padding-bottom: 56.25%; }...

Maybe you need to have different classes? one for 4×3 videos (e.g. the 1st vid on the failing page), one for those long and narrow vids (the two other vids on the failing page, the one on the page that works fine).

The id was indeed the culprit! I added a vids class and transferred the #vids padding to .vids. All appears just fine now. Thanks so much Philippe.

---

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.