Here is the link to the project: Codepen
I’ve noticed there is a weird scroll bar that appears in the Nav Bar if I view it using Codepen’s full page view. It goes away when I open the Developer Tools in Chrome though. If you know what I should do about this, I am happy to listen. Otherwise, I’ll just leave it.
Thanks in advance and good luck on your own endeavors!
EDIT: Here is the project hosted on Github, this looks better than the Codepen for whatever reason. Project Link
Very clean and simple. I am sorry, not sure how to fix the scrollbar problem.
Thank you for the feedback!
I really don’t know what the issue is with the Codepen version. I just threw the files on my github and they look fine. I’ve added the link in the original post.
Apparently CodePen is setting the
overflow property of the navbar to
scroll, but the source code of the Github page doesn’t seem to have this property. I guess
overflow: scroll it’s not in your original code, so you don’t have to worry about it.
Sometimes I may have several pages open on my desktop. To see them all at the same time, I will typically shrink the width down enough that I can fit all the windows on one screen and still see the content. The problem with your solution is, when I shrink the window width down to a certain point, your app displays the message “Please rotate your screen for optimal viewing”. Well on a desktop that is not possible.
Think of a way to make your site usable at all screen widths regardless if it is a mobile device or a desktop device.
I figured they were doing something when displaying the site. Thank you for the insight!
While I understand the need to design for every device and viewport, I made the decision for this site to only be viewed on larger screens.
I will redesign the mobile view in a future version though. For now, I’ll just clarify the rotate message. Thank you for taking the time to review my work!
Desktops have large screens, but the user gets to control the width of the browser window. I just think you should allow some kind of content to be shown instead of a message that basically tells the user they can only view your page if they open full screen on a desktop or turn it sideways on a mobile device. That is not really what responsive design is all about. Since this was place under Project Feedback, I am just giving you my 2 cents of advice as a user of your page. In the real world, you can not control what device the user gets to use. They control the device and if you page will not show them the content they seek, they will go elsewhere for it.