Imgen huge ...

horacionomade's picture

Hi how are you doing??!!

I installed H5P in Moodle 3.1 and it works fine, the only problem I encounter is that for the drag-and-drop exercise, the background image is displayed by taking up the full width of the screen and does not respect the predefined size in the configuration (800 px).
How can i fix this?

H5P file: 
icc's picture

Hi,

Unfortunately, the task will always scale to fit all the available width on the page. The measurements entered becomes more of a way to set the ratio of the task. This can be problematic in some themes where the width always matches that of the browser. A trick to get around this is to use CSS to give the container a max-width that it may use. But this may be complicated if you aren't familiar with CSS.

The reason for this is to be able to support all kinds of screens and devices. The task will always scale to fit the device.

horacionomade's picture

AAHhh !! Very good, correct!
And what css command should I use and where should I put it? In WP?
You could also play with the proportions of a picture and the surrounding frame !!
Perfect!!!

Thanks a lot for your kind response !!!

tomaj's picture

Hi,

If your WP is public, maybe you can post a link, and someone can suggest some css.

It might be something like:

.h5p-iframe-wrapper {
  max-width: 800px;
}

- Tom

horacionomade's picture

Barbarian !!!, thousand thanks Tom !!!

tomaj's picture

Happy to help!

- Tom

horacionomade's picture

In Argentina we say "Barbarian" when something is very good ;-D

tomaj's picture

Awesome! Then I learned something new today :)

In Norway, we say "Texas" when we mean "crazy".

- Tom

horacionomade's picture

"Texas"!!!

hahahaha !!

Barbarian !!!!

A big hug has been a very rewarding exchange !!!