Please look at my project :
All is good when it’s in full screen. But when I minimize the browser, the content inside it becomes vertical thus becoming unreadable.
What can I do so that when someone opens it from mobile, it will be readable just like this:
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:
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.
reduce the font size on smaller screens
To do this, you will have to use media queries. You can go through the ‘Responsive Web Design Principles’ lessons in the beta curriculum to get a quick intro or just google around a bit:
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:
The viewport units are a new set of units designed for the challenges we face today. One-pagers, full-width grids, typography, and many other things rely on the size of the viewport. Previously, we hacked these challenges using percentages as...
Good luck in your journey!
Thank you for your reply.
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.
Your reply is much appreciated.
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.
var tweetText = '"' + json.quoteText + '" ' + json.quoteAuthor;
$("#tweetButton").attr("href", "https://twitter.com/intent/tweet?hashtags=quotes&text=" + encodeURI(tweetText));