Responsive CMS

The site was designed with scalability in mind. As such, the elements are all sized with vmin, vh, vw, etc.
The site scales well to mobile devices mostly without media queries, using the viewport tag to zoom the page properly on load.

Some of the pages have been changed with media queries:

Mobile scaled version of the about page

The CMS edit pages are scaled so the inputs fit the hole width.

Mobile version of the portfolio page

The portfolio starts zoomed in, and only shows one picture per row.

This is the completed design of the profile/about page

Due to the viewport tag, this page starts fullscreen on mobile. I had problems with centering this page’s content specifically. After troubleshooting, it turned out that there was an html tag in the CSS setting position as absolute, which pinned this to the left.

Duckett, J. (2011). HTML & CSS: design and build websites. Indianapolis, IN, Wiley: Wrox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.