I have built a simple and standard website using Foundation 5 (upgrade to 6, probably above pay grade) and I thought I had understood how responsiveness and grid works. Page layout:
- row - topbar with nav
- large banner - 'no row' so 100% of the screen (picture banners)
- row 1...n
- row - footer
I set in settings.scss: $row-width: 90%;
- so get nice responsive indent of 5% on each side of navbar and content rows (i think)
BUT on very large screens the content gets way too dispersed...
So, I tried to set in custom.scss: .row max-width xxx;
- my banners go up to 2800px wide, height 750px
- I want my content to stop scaling past 1600px
Am I being stupid or just doing it wrong?
On small screens/mobile - I probably lose too much screen
- is there a simple way to adjust row width back to 100% on small screens
- there only appears to be one page-width variable