Mobile Optimization - Githubissues

workofjohn / portfolio

John's portfolio! Made in 2016 as a project for Web Design.

0 stars 0 forks source link

Mobile Optimization #9

Open workofjohn opened 7 years ago

workofjohn commented 7 years ago

@media only screen and (max-width: 500px) { body { background-color: FFFFFF; } }

Ignore the code up top, it's just for reference.

Mobile optimization requires using that @media attribute to toy around with website options if the screen size is a certain resolution. All pages have the media attribute attached, but not many have the columns optimized, nor the home screen able to reflect the work it contains with mobile use.

Explore the @media attribute and do the following to become more media-friendly:

Ensure that the wrapper DIVs won't become too small or have extra space (stretch them!)
Play with font sizes until readable on mobile
Re-Design the home page to be legible on a mobile device
Re-Design content pages to be legible on a mobile device

workofjohn commented 7 years ago

Biggest issue will be re-designing the home page so that it can be legible on a mobile device. Easiest option would probably be to create a new sidebar drop down from the top, and re arrange the icons to not need scroll over.