Thanks for the good advice everybody. I took your tips and hacked away for a few hours today and came out with this. I read that min px width for browser testing is 320px. When I went that small, the xs columns pushed the buttons farther down the page until they were on the next page (because I didn’t know how to space out elements on the page except to use margin-top. So in xs and sm screens it probably looks fine, but I am guessing the up/down nav links (buttons) look too close to the element above them.But on my Iphone, everything looks to small in portrait, on landscape it looks good. I tried cross-browser testing, but I am not sure which devices to test and not sure the features on the app in general.
I learned some very important lessons…
ALWAYS build it mobile FIRST. I knew you are supposed to but started this project on my laptop and didn’t think to minimize the screen first and then build up from there. Rookie mistake.
In this game, you really only learn by doing.
Persistence and a refusal to give-up pays off. I’ve worked at this project for probably a week and a half and had to figure it out on my own. But the payoff of creating something awesome (even if it is very elementary) is a wonderful feeling.
If anybody has any suggestions on best practices and how to deal with things I had difficulty with i.e. vertical spacing on page between elements, easiest way to run cross-browser test (maybe I don’t need it with Bootstrap?), Is 320px really the min-width to start building a page? If so, how to make things bigger so people don’t have to go to landscape on smaller screens. Maybe there is a way that elements can stack even more. I put the media query for min-width 320px in my css, although I don’t think it’s necessary. I’m not sure. Any advice on spacing elements as I scale up because they start looking too close together and I don;'t think I’m supposed to be changing margin-top for each col size. I don’t even think you can. So this is a best practice issue.
I will also be checking out other frameworks (flexbox and Foundation). Thank again and I look forward to your comments, suggestions, and advice.
here’s my portfolio page. I still want to tweak it for spacing and figure out how to change the hover color on top. https://codepen.io/CodeItLikeYaOwnIt/pen/MbPOmY