Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📱 Not Mobile responsive. #3

Closed
ABSphreak opened this issue Aug 20, 2020 · 6 comments
Closed

📱 Not Mobile responsive. #3

ABSphreak opened this issue Aug 20, 2020 · 6 comments
Labels
hacktoberfest Hacktoberfest contributions welcomed! help wanted Extra attention is needed

Comments

@ABSphreak
Copy link
Owner

ABSphreak commented Aug 20, 2020

Jokes' card is not mobile responsive.

image

@ABSphreak ABSphreak changed the title Not Mobile responsive. 📱 Not Mobile responsive. Aug 20, 2020
@ABSphreak ABSphreak added the help wanted Extra attention is needed label Aug 22, 2020
@ABSphreak ABSphreak added the hacktoberfest Hacktoberfest contributions welcomed! label Oct 7, 2020
@NOPROD
Copy link

NOPROD commented Oct 20, 2020

Impossible, i try and i realise it's impossible haha. (with git)

We can't get any information from user device, so we can't make an api call with generated variables like window.innerHeight.

You can only render your jokes as an jpg image with markdown cause is parsed (cause you download it with <img src="http..."/> and something like <div :html=""> don't existe)

So, if you wan't help we can make a render who like great on mobile and desktop.

@ABSphreak
Copy link
Owner Author

@NOPROD you have github-readme-stats on your profile, check those on mobile, working fine. I wanted something similar, but it should also adjust to the text that is given in the card.

@anuraghazra
Copy link

try setting proper viewbox on the SVG and don't use any units on the width, height. just give them width="100", height="100"

And yes you cannot make use of responsive text sizes, just make your card maintain it's aspect ratio.. thats best you can do i think.

@ABSphreak
Copy link
Owner Author

@anuraghazra I tried doing that, but text was clipping if it was more than 50 characters in one line, so I made it choose the viewbox itself. Do I make a text-breaking mechanism, if it exceeds a certain word per line limit?

@anuraghazra
Copy link

Yeah you can do that we also have that in github-readme-stats

https://github.com/anuraghazra/github-readme-stats/blob/master/src/common/utils.js#L145-L160

@ABSphreak
Copy link
Owner Author

Great! I will fix it soon.
Thanks for the tips @anuraghazra, really appreciate it.
I will connect on Discord if I'm stuck somewhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
hacktoberfest Hacktoberfest contributions welcomed! help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants