Feedback for my password generator page

Hey guys, so I’d like to get some feedback for this site I made for practice and to also get help with making it more mobile-friendly (tried to correct it on my own, just made things worse).
Site in question:
https://codepen.io/M_Opp3l/pen/mdezNmO

Thanks in advance for the help and feedback!

Regards
Ma3_str0

A few suggestions:

  • The font is very hard to read. I have to increase the text size quite a bit before I can easily read it. I’m not saying that font can never be used, maybe for large headers, but it probably shouldn’t be used for normal sized content.
  • For the responsiveness issues, my suggestion would be to start over with your CSS styling. Narrow your browser window as far as it will go and style the page to fit in that narrow window (there should be no horizontal scroll bars). This will be your base CSS. Then slowly widen the window until you come to a width in which you think you have enough room to rearrange things for a wider view port. This will be your CSS break point. Measure the width in px but then divide that by 16 to get the width in ‘em’ and use that as the break point:

@media only screen and (min-width: XXem) {

You may have to adjust the em value slightly to get it working exactly the way you want it, but dividing the pixel width by 16 will give you a good start.

1 Like

Is it ok if I still use the cursive font for the headings? I’m already using the responsive display function on Firefox to help with the media queries. I’m kind of trying to give the main doc rounded edges and an other color when it’s on mobile but then I confused myself with the CSS, lol!
But thx for the advice, I appreciate it!

Sure, I think that font can be used for bigger sizes.

To me, that font looks very ‘artsy’, like it would fit well on an artist’s or writer’s page. Personally, I’m not so sure it has the correct feel for a password generator page. I’ll be the first to admit I am not an artist at all and styling is not my strong point, so take this with a grain of salt. But I would try to find a font that fits a little better with a technically oriented page such as this.