Content inside the box is unreadable when I minimize the browser

Please look at my project : https://codepen.io/bradrar1/full/mLwWeP/

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: https://codepen.io/freeCodeCamp/full/ONjoLe

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.
  • 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:
https://beta.freecodecamp.org/en/challenges/responsive-web-design-principles/introduction-to-the-responsive-web-design-challenges

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:

Good luck in your journey!

1 Like

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));