Where in the css file do I change the height...?

Submitted by cresdolls on Wed, 11/12/2014 - 07:48
Forums: 
General discussion

hello,

Where in the css file do I change the height of the flashcard wrapper/table? Do I change it in the plugins css or the flashcard css? I've been looking and trying it out all day but I just don't know which part of the css that I should change. Could anyone send me towards the right direction?

Many thanks in advance!

falcon's picture

falcon

Wed, 11/12/2014 - 13:09

I assume you are using wordpress. Since both the Wordpress plugin and the flashcards content type are being updated rapidly it won't be wise to change their files.

I'll ask icc to comment on how such a change may be made in wordpress without changing the original files.

icc's picture

icc

Wed, 11/12/2014 - 14:16

Actually the height is determined by the height of highest card in the card set. 

To change the height you would have to change that logic, or set height: xxx !important in CSS, or create your own JS which changes the height.

You can append your own CSS and JS to content types in WordPress. If the h5p is embedded by iframe you must append the file names to the H5P.settings['cid-XXX'].styles/scripts arrays. If embedded by div you can enqueue using the default methods in WordPress.

cresdolls

Fri, 11/14/2014 - 09:53

Thank you for the reply. 

The thing is... I was able to change the width of the area, but I just forgot where I did that. I'm not too sure if I explained it properly. I don't want to really change the card height but rather just get rid of the unwanted white space between the card and the 'next' button. I added a picture to just make things more clearer... Sorry for the confusion.

Attachments: 
Image icon h5pforumscreen1.png
icc's picture

icc

Fri, 11/14/2014 - 10:50

I see, there might be some changes left over from design adjustments. You can try changing the number 286 at line 102 of flashcards.js to 164. That should give you less whitespace.
The file should be located at wp-content/uploads/h5p/libraries/H5P.Flashcards-1.0.

Be aware that there will always be whitespace if you have a higher card in the stack.
Let us know how it works out.

cresdolls

Mon, 11/17/2014 - 07:33

Thank you so much! It worked perfectly!