Bullet Points Next to Cards in Memory Game

Hello,

I just created a memory game and in the example, there are not bullets, but for some reason on mine there are. You can see it here. Am I doing something wrong or is this a bug?

http://jamie.techdesigntesting.com/memory/

Thank you!!

Jaime

fnoks's picture

The theme you are using have the following CSS-rule, that also applies to the cards:

.main-content ul li {
  list-style: disc;
}

If you add the following CSS-rule, it should disappear:

.main-content ul li.h5p-memory-card { 
  list-style: none;
}

Hi. I applied the CSS written above, clear cache, but the bullet points are still showing. Plus, as you will see in https://www.langcom.org/platform-sample-page/ , the label is showing on the left side of the game, which shouldn't be there. I'm using the the BuddyBoss.

Thanks for the great work you're doing the H5P.

Raul

tim's picture

Hi Raul, I think there's still some work you'll have to do to make sure your css styles don't override memory game's. 

Any hints on what exactly I can do on the CSS styles.

otacke's picture

Hi Langcom!

You've included H5P directly into your website as a DIV element which shouldn't be happening by default. H5P should try to use its own iframe. You can read more about this in another forum post. In short: The iframe "protects" the inner content's stylesheets from the outer content's stylesheets. You do not have this protection, and your DIVI builder overrides the styles of H5P.

I'd rather not try to change all the CSS. That'd probably be very tedious. I'd rather try to find out why your site is using the memory game as a DIV element (did you do this for the DIVI builder? Did it do it? I don't know it) and return to using  an iframe.

Best,
Oliver