images and course presentation always ful width

  • Resolved wiebke.wetzel

    (@wiebkewetzel)


    2 years, 10 months ago

    Hello,

    I am using H5P course presentations and images alone or as part of a branching scenario. They are always shown full width – even if I have smaller images. The image on the test page is 334x500px and looks awful if inflated.

    I have tested it on three websites I administrate, two of which have a very minimalistic theme with a rather short CSS-file (the theme name is Editor Blocks). The test page was created on one of those two sites. I removed all custom CSS for troubleshooting, but that didn’t have an effect.

    I can of course write some custom CSS to fix this, but I don’t know which other H5P content that might affect. And I am not experienced in writing CSS for responsive sizing.

    Thanks for supporting me!
    Wiebke

    • This topic was modified 2 years, 10 months ago by wiebke.wetzel.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter wiebke.wetzel

    (@wiebkewetzel)

    After some thinking and looking into the CSS:

    1. I think I found the CSS which causes the issue: 

    .h5p-wp-admin-wrapper .h5p-content-wrap {
  float: left;
  width: 100%;
  margin-bottom: 20px;
  max-width: 960px;
}

    2. On a normal WordPress page I could use a Gutenberg block to limit width, such as columns or a container with a margin on the right and left. But that will not work within the courses in my LMS (WPLMS) for which I actually use H5P. I work in a frontend editor in that LMS and it would be unpleasant to modify all units with Gutenberg blocks in the backend. It is possible, though.

    • This reply was modified 2 years, 10 months ago by wiebke.wetzel.
    Plugin Author icc0rz

    (@icc0rz)

    Hi Wiebke,
    I’m not sure if I’m following what the issue is. Is the content larger than the content column in the theme? Maybe you have a screenshot that makes it easy to see.

    Thread Starter wiebke.wetzel

    (@wiebkewetzel)

    Hello icc0rz,

    please find a screenshot here

    The picture is 67×100 px (I pushed it to the extreme to demonstrate the issue). You can see in the screenshot that it is displayed with 1038x1549px – which is full page width (with that website in my 21” screen). And you can see that it is extremely blurry.

    In the H5P documentation I found: “The image will be scaled (proportionally) to fit the max-width of the container in which it is placed.” As I wrote before, I can easily adapt that on a normal website by using a container with a smaller width. But in my Learning Management System (WPLMS) I don’t have that option –?or at least it is quite cumbersome to implement.

    I would prefer it, if the maximum H5P block size would be limited to the size of the image used. It should be responsive of course so that it also works on smartphones.

    I am happy to add some custom CSS to my website, but I am not good enough in CSS to adapt it myself.

    Thanks for your support!
    Wiebke

    Plugin Author icc0rz

    (@icc0rz)

    Aha, yes, unfortunately, the content type was never designed with this in mind as the use-case is a bit different. Though, I believe the authors would be happy to accept a pull request or feature request for supporting this.
    You can find the official issue tracker for the project here: https://github.com/h5p/h5p-image-hotspots/issues

    Thread Starter wiebke.wetzel

    (@wiebkewetzel)

    I added a feature request in the H5P forum. Thank you for your support!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘images and course presentation always ful width’ is closed to new replies.