Responsive Design: Created CSS for different viewports, not responding
I've created a series of CSS queries for different viewports, but I guess I'm not getting the results I want.
On the iPad tablet device in landscape mode the site looks pretty good. Not so great in Portrait. I could use some pointers on how to fix that.
The Android in landscape mode not so hot. The menu flows underneath the first menu items, so I'm not sure how to fix that issue, plus a slight gap on the right of the site. Ditto for portrait view.
On the iPhone in landscape mode, it looks okay. The menu still flows underneath the first main menu item like the Android does and the 'Announcements' on the bottom needs some space between the 'Announcements' heading and the menu links. In Portrait it looks pretty good with the exception of the main menu item flowing underneath the first menu item.
I thought that if I modified the font-size to be 70% that would've fixed the problem and the padding around the main menu items, but I guess not.