Re-sizing

Hello,

Is there any way to control for size? On my iphone, h5p content sizes itself perfectly, but on both of my laptops many of the h5ps (course content, drag and drop, quizzes, etc) display too large. You can't see the whole h5p on the screen at one time, and you have to scroll up and down between questions, etc and the controls at the bottom. I can't seem to figure out how to stop this from happening. Any suggestions?

Thank you!

 

falcon's picture

H5P uses the full width of its container so if your site has unlimited width for the content you need to limit it for H5P somehow. If I want an H5P to be narrower on a site that doesn't have any nice way of controlling it I often add <div style="max-width:600px:">H5P tag here</div> for instance.

Just to make sure I understand, I add that to my css file? And what do I put for the H5P tag? 

Thanks!

falcon's picture

It is added to the HTML around the H5P tag.

I'll give it a try.

Hi,

I have the same issue. How did you go, did it work for you?

Thanks

Claire

but I will let you know when I get it figured out ;) If you do it first, please keep me posted too! I'm new to all this stuff. 

Thx 

falcon's picture

To be clear if you have an H5P with id 123 this should work:

For drupal (replace - with =):
<div style="max-width:600px;">[h5p-123]</div>

For Wordpress:
<div style="max-width:600px;">[h5p id="123"]</div>

I will try this today :)

Hi,

I am using h5p in wordpress, I have uploaded the h5p files , and used them using wordpress plugins.

In most of the h5p files, the vertical scroll bar on right side in browser is missing.

How do I resolve this problem. Please help

Thanks,

Saroja

tim's picture

Hi Saroja, would you be able to attach some screenshots of where the scrollbar is missing?

Please find the screenshot attached.

The vertical slider on browser right side is not shown initially, when h5p content is there on the page.

The vertical slider is however shown for non h5p content.

Thanks, 

Saroja

 

Attachments: 
fnoks's picture

I think this is caused by your theme, maybe an overflow: hidden in one of the parent DOM-elements?