Sidebar issue by activity stream

Hi,

All content including the sidebar inside “activity” page is coming from the plugin.

You can set a page template to see this, edit the page and on the right side of the page editor screen, set “Template” to something else like “Page with sidebar”.

This way, you will notice the sidebar that is from the theme is different than the current sidebar (from the plugin).

Currently, it is set to “Default template”. Means, no sidebar.

Lastly, if you look at the overall HTML for the activity page:

<div class="youzify-right-sidebar-layout">
  
  <div class="youzify-main-column"> ... </div>
  
  <div class="youzify-sidebar-column youzify-sidebar youzify-right-sidebar"> ... </div>

</div>

You can clearly see the sidebar and this layout (page content) is coming from the plugin. So, the page content itself outputs the main area and sidebar.

That is not a sidebar from the theme, hence why it looks different.

Thank you!
I wrote it to youzify plugin author and wait for respond ??

P.S.
Is it possible that the issue on mobileview on Iphone with etrached pictures depends also on this?
https://www.dropbox.com/s/cl63l4r0rvbxr6c/Activity%20%E2%80%93%20Rainbow%20Songs%20%E2%80%93%20Texts%20%26%20Music.png?dl=0

• This reply was modified 1 year, 7 months ago by jaroslawistok.

I remember we have already discussed on stretched image issue. You can read: this and this.

It’s a separate issue due to plugin styling the images with height 100%. I suggested you the following CSS code previously:

.youzify .activity-content img { height: auto; }

Thanks a lot! You are genie!
I somehow have overseen this answer, tried it now and it woraks!

thx

But videos (on iphone view) are still streached on single posts

Does this css not work for videos?

The CSS code was meant for images. I’m not sure which video you are referring to. You can adjust the code to include all HTML video tag as well like this.

.youzify .activity-content img, .youzify .activity-content video { height: auto; }

This is unrelated to our theme. These elements are output by plugin, so the CSS for these specific elements should also come from plugin.

I know but youzify author try each issue to explain with theme problems ??

Videos are streched on each single post like:

https://rainbowsongs.org/beautiful-soul/

this css didn’t work here. Videos get some black stripes above and below on mobile iphone view. So they are still streached. I don’t understand why plugin authors wan’t understand this as issue ??

Do you mean the Youtube video (iframe)?

This requires some additional class around the iframe (Youtube embed) and its not simple to fix it. Currently, there is just a generic paragraph parent element around the iframe. So, I can’t provide you CSS fix since there is no specific class to target the elements.

I’m not sure if you can follow this but in your block editor, you can add an additional CSS class to any block element like iframe (embed), paragraph, etc.

1. Add an additional CSS class to iframe (Youtube video embed) block, Let’s call it: u-youtube-iframe
2. Add an additional CSS class to the parent element of iframe, that is a paragraph block, Let’s call it: u-parent-iframe
3. After adding above classes, the CSS that would hide those black top and bottom borders would be:

.u-parent-iframe {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.u-parent-iframe .u-youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Oh, it sounds very complicated, I guess I let it so.

On mobile there is only preview streached like earlier (thank you, all images). Starting to play the video is normal sized but with black stripes above and below.

The videos are auto embeded with standard wp function just placing a yt link. So I wonder why they behave this way on mobile.

But in this case it seems not to come from youzify (I deactivated this letting only buddypress working) with same effect.

P.S.

Here an example from video added same way but showing right way also on iphone mobile:
https://vitarianer.com/champignon-nuss-frikadellen/

• This reply was modified 1 year, 7 months ago by jaroslawistok.

Are you using classic editor?

This issue is related to the iframe that you input directly. The theme or plugin can’t solve this really. I recommend you to use a “Youtube” block in the block editor and input the video URL.

In the block editor, there is a “Youtube” block that can embed a Youtube video that would support resizing for smaller devices.

You can read this similar thread.

Yes, I use classic editor and wigets plugins. I dont like this new way of wp with gutenberg blocks and so on ??
But on example post from my other site i have sent, there are also classics activated there and videos are showing correctly.

So maybe it is another issue than your posted forum thread.

P.S.

Uploading video is no solution at all ??

Your other site’s theme is using a library named “Fitvids” to handle this.

You can try this plugin. This would serve the same purpose.

We do not include Fitvids library in the theme as WordPress block editor also handles this video resizing for smaller devices.

Wow, You are astounding well informed ??
Maybe you consider to implented this in your theme as I have over 40 plugins which slows the site ??
Otherwise I have to accept this amll issue.

Thanks so far for all your help!

I now tried 2 fitvids plugins and both destroy activity stream page completly. They make some picture extremly big, looks like page background, I immedialtely deleted them

• This reply was modified 1 year, 7 months ago by jaroslawistok.

The FitVids plugin I mentioned above, it comes with a custom selector settings in “Appearance” > “FitVids” – “FitVids Custom Selector”. In this field, you can input:

iframe[src*='youtube']

So, this should affect only the Youtube videos.

I tried. same effect on desktop. Activity stream gets huge background from some video ??