Hi everyone, I finished my portfolio web page and am struggling with a few things. It is important to say that I made it pure with HTML and CSS (learning JavaScript now). You can see the webpage here: https://libormarko.github.io/ or on codepen: https://codepen.io/libormarko/pen/wbWvMq
Could you help me please with this:
Once I open the page on my phone, the font size is barely readable and I need to zoom in to properly see the content, especially the blog section. I found that the font size of the body should be 16px, which I did, so what else can I do?
I got feedback from people with some devices that the background picture is not seen in the full viewport. (see an attachment) It works fine on my iPhone though. Is there anything where I could test the page for different viewports?
Do you think it is a better idea to make a hamburger menu once the screen is smaller? If yes, from what screen size should the menu switch to hamburger style?
If you maybe have any idea how to make my page better, I would appreciate it a lot!
On the desktop open your browser’s developer tools (F12 in Chrome) and there should be an option to set the viewport to various sizes to test your site’s responsiveness.
Playing around with the above should let you figure out at what point you want to switch to the hamburger or a different menu layout.
Looks very nice! I like the clean simplicity of your designs.
For text on small devices, did you add it to @media? And did you try changing the order of the properties–placing media (small screen) opposite larger screens in the list?
And how about viewport window unit? I’ve never used that for font size, but it’s out there.
And yes, do the hamburger for the navbar, makes things cleaner on small screens.
In Chrome, you can go to right of browser bar and click “more tools” then click “developer tools” and in the top bar there’s a drop down of many different screen types to view your page in.
Thank you @InternetFriend!!! I love the medium article you shared and chrome developer tools as well. It makes my life so much easier, Thanks a lot for sharing. I know all the answers now.
Thank you @YvoDae. I try to keep it simple so it does not have an overwhelming impression. I checked all the stuff you recommended and fixed all the trouble I had! Yay! Thank you for your answer and have a nice Friday.
Nice choice going with blue and white it makes things look really clean and fresh. If there was anything I’d change it would be to remove the padding on mouse hover, apart from that, looks great
Excellent work. My only nitpick is the hover animation on most of the links. The links themselves jump around when you hover on them. If you can modify your code so they do not move that would be much better.
Hey @theague. Thank you for your advice. I don’t like them jumping either. I think I did all I am aware about for now to change it to jump less around. I will google for more options. If you know about some trick that would fix it, please share.
Wow! nice job man! the only thing (or things) you need to improve is when you hover over the project tiles or the contact buttons. the project tiles really mess up the scrolling. You shouldn’t overflow it. The contact buttons are waring themselves out trying to adjust to their new width. just changing the color of their backgrounds should be fine.
Thank you @ConnerOw1115. I already fixed that, at least it works fine on my PC and on my two phones. I need to check it again. What browser/device do you please use?
I checked all the stuff you recommended and fixed all the trouble I had! Yay! Thank you for your answer and have a nice Friday.