SVG: Scrolling necessary on mobile screen

[kuri-majo]

Hi @HartBlanc

Thank you for this thorough deck, it is everything I looked for in a UK geography deck and more. I have a slight issue with it though on my iPhone 8: As can be seen in the screenshots, on the front side, the svg is not fully visible and I would have to scroll down in order to see the whole picture. The whole svg is only visible when I activate the back side.

Is this something that can be fixed in the deck or is there something I can change myself? I'd be happy to do some testing if you need.

Cheers and thank you for the great deck!

[HartBlanc]

Hi there,

Thanks for raising this issue.
Unfortunately, I only test against the Anki desktop app and Ankidroid (as I don't have any iOS devices).

You could adjust the (CSS) styling to adjust the size of the image. I've attached some screenshots below to walk you through the menus in the desktop app.

You'll want to adjust the "height" attribute of the .grow-section selector to something a little smaller.
Perhaps to around 80vh (80% of the view height), although you can tweak this value to your preference.

Note that this will adjust the height of the backside of the card as well, which is probably not ideal.

If this works well for you, I'd greatly appreciate if you could report back with the optimal value for the height attribute.
I'll then ship an update that targets the change to the front side of the card only.

Thanks!

[kuri-majo]

Hi @HartBlanc

Thank you for the quick response and the detailed instructions. I have experimented with changing the height as you described. Unfortunately, this does not solve the problem as it just changes until where the svg is displayed.

I think in order to achieve what I need one would instead need to limit the width (because the aspect ratio does not change).
Unfortunately, I don't know how to do this but I'll try it out if you let me know how.

I have attached some screenshots with 60vh, 70vh, and 80vh (nothing changes when I increase further than 80vh).

Thank you!

So this is 60 vh:

This is 70 vh:

And this is 80 vh:

[HartBlanc]

Hey, I'm quite surprised to see this, and without being able to experiment with an actual device I'm not really sure what's going on.

If you want to try playing around with the width you could try adding e.g.
width: 50vw; field to the grow-content / grow selectors. Or you could try adjusting the the max-width/max-height field of the SVG selector.

I might be able to help some more if you export your anki deck as an .apkg (with or without progress would be fine.) and share it here.

[kuri-majo]

Adjusting the max-width in the SVG selector to 70% did the trick for me!

I wanted to upload my .apkg here, but apparently, I'm not allowed to share that file type here. Anyway, it was basically your deck just with the max-width changed and I think my issue is solved with that.

Thank you very much for your help!

[HartBlanc]

Happy to help! Glad you managed to work it out 🙌