I don’t think the example from the second link is particularly great as scrolling side to side on mobile is annoying… Here’s how I did this project: https://codepen.io/faktotum85/full/oexRVg/
I think that’s a better goal to aim for in terms of how it behaves on small screens.
With that in mind, I have a few suggestions. You could:
reduce the margin around the text box on smaller screens to have more space to work with.
Alternatively, you could use a font-size with a unit that’s relative to the screen width (vw). So e.g. in your example you could use font-size: 4vw instead of font-size 60px. It’s not a perfect solution, but very simple and quick. You can read more about this here for example:
You’re right, My code is annoying for mobile users so thank you for your advice and the suggestions. Will look it up.
Also, I just saw your project. How did you put that twitter button? Can you give me a link related to that? I am having trouble putting that button whenever I generate a quote.
Looking at my code, my tweet button was actually kind of broken, but I’ve fixed it now. There’s different ways to do twitter buttons, but I wanted something lightweight, so I just made mine a link with the url for creating a tweet. Then when a new quote is generated, I can just change the href of the link to include the text of that quote.