Currently, I am in the process of creating a layout where the sidebar's size is fixed due to design constraints. However, while the primary content area can adjust nicely, we are facing issues with the sidebar element when it squeezes. To tackle this issue, I have been following suggestions from Miko found here. Even though those tips were originally for foundation 5, they worked well for me except that I had to apply the collapse class to all rows. It's important for me to maintain the gutters as per the foundation guidelines. To experiment, I created a sample layout using various colors.
.section {
max-width: 400px;
margin: 0 auto;
position: relative;
}
@media (max-width: 600px) {
.section {
max-width: 1024px;
}
.section.sidebar-left {
padding-left: 335px;
}
}
.sidebar {
position: absolute;
min-width: 335px;
top: 0;
}
.sidebar.sidebar-left {
left: 0;
}<div class="section sidebar-left story-grid">
<div class="sidebar show-for-large sidebar-left" style="height: 100%; background-color: green;">Sidebar</div>
<div class="row collapse" style="background-color: orange;">
<div class="row collapse" style="height: 50px; background-color: blue;">Full Width</div>
<div class="row collapse">
<div style="height: 50px; max-width: 355px; background-color: pink;">Fixed Width</div>
</div>
<div class="row collapse">
<div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div>
<div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div>
// More column entries...
</div>
// Additional row entries...
</div>
</div>The story-grid class doesn't have much impact other than altering font color and height for demo purposes. Here is the resulting output:
https://i.sstatic.net/r1xhh.png
This output is almost what I desire, but there is still one aspect missing – gutters. When I remove the collapse class, the visualization changes significantly like shown below:
https://i.sstatic.net/ksfVD.png
I demonstrated the issue by hovering over the content section, highlighting how the internal grid system extends beyond its parent boundaries. So, my main concern now is achieving the desired result without compromising on maintaining the gutters intact. How can I achieve this?