Menu icon Foundation
Page Width issues on small/very large screens

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

M

 

$row-widthmax-widthresponsiveness

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

M