Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

CSS issue

Bruce Piper
Mar 19, 2018 12:02AM PDT
Hi there tubepress people!
I've got Tubepress working on https://travelbulletin.com.au but it's not looking exactly right.
On the front page I display a gallery which I have customised to have no thumbnails (called td/nothumbnails) - only showing the video most recently added to a playlist. It's displayed in two spots, both labelled as 'Featured video'. Both of them aren't resizing the gallery properly - the one under the 'current issue' on the right hand side is sitting too high within the little box, and the one underneath is being cut off.
Clearly I'm not much of an expert at CSS - are you able to tell me what I'm doing wrong?
thanks Bruce
Elisabeth T.  STAFF
Mar 19, 2018 12:38PM PDT

Hi Bruce!


It looks like there are two things interfering with the alignment and display of your TubePress videos.


First, regarding the topmost video, it looks like you’re using some JavaScript to “equalize” the height of the row. Because of the current HTML structure, this results in the two left images (current issue and cover story) being resized to a height of 205 px, which in turn produces whitespace at the top of the images, which finally results in a misalignment of the images and the TubePress video.


We think one solution would be to wrap the img elements in an empty div and add the “equalize” class to the div instead. This should “protect” the images from being resized, while still equalizing the height of the entire row. Here’s 1 the change we’d suggest.


Second, it looks like some of your theme’s CSS is preventing TubePress from properly resizing the TubePress videos to “best fit” the viewer’s screen. In particular, on line 119 of /source/partials/_front-page.scss, we see this: 2. You might try adding an additional CSS rule so that the TubePress videos have a height of 100%, e.g. 3.


Give that a try and let us know?


1 https://pastebin.com/raw/Wkeyny2c


2 https://pastebin.com/raw/wkwku2ja


3 https://pastebin.com/raw/d12XtHdH

Bruce Piper
Mar 19, 2018 09:26PM PDT
Hi Elizabeth, sorry no joy, I've made those changes but they don't seem to have made any difference sorry!
Elisabeth T.  STAFF
Mar 20, 2018 07:13PM PDT

Sorry to hear that. We’re still investigating but will get back to you ASAP!

Elisabeth T.  STAFF
Mar 21, 2018 02:48PM PDT

We spent some time trying to come up with an easy solution for the misalignment between the featured video and the two images to its left. The crux of the problem is that your theme equalizes the height of the elements in that row, but it does this before TubePress has a chance to resize the video player to “best fit” its container. However, your theme doesn’t re-equalize the height of the row, and the result is that the column with the video looks different than the rest.


We think that if you play around with the aspect ratio of the video, you should be able to reach an acceptable size that gets rid of the misalignment. To adjust the aspect ratio of the video, you can add the embeddedHeight 1 and embeddedWidth 2 options to your shortcode (here’s 3 an example).


If you’re able and willing to share WP credentials with us, feel free to send them along in a private ticket 4 and we’ll be glad to log in and investigate this issue on your behalf. Let us know. Thanks!


1 http://support.tubepress.com/customer/portal/articles/2034787#embeddedHeight


2 http://support.tubepress.com/customer/portal/articles/2034787#embeddedWidth


3 http://pastebin.com/raw/exuaQkxx


4 http://support.tubepress.com/customer/portal/emails/new

This question has received the maximum number of answers.

c65861bf7a72e1a8878bdf73cabbbdbf@tubepress.desk-mail.com
http://assets2.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete