I have the task of designing two layouts - one for Landscape and one for Portrait. The Landscape layout needs wider columns. I am utilizing the latest version of Susy to accomplish this.
Below is the code snippet I have written:
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
$total-columns : 7;
$column-width : 10.900em;
$gutter-width : 2.80em;
$grid-padding : 4.00em;
$show-grid-backgrounds : true;
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 0px)
and (max-device-width : 768px)
and (orientation : portrait) {
$total-columns : 7;
$column-width : 7.2em;
$gutter-width : 2.8em;
.container {
@include container;
}
}
Unfortunately, the grid does not adjust as expected. The columns remain the same size, which is the smaller portrait size. How can I resolve this issue?
While other responsive elements on my page work well, the grid layout seems to be the problem!
The Susy Documentation provides insights on Responsive Grids, but the information is quite complex and does not address orientation specifically. Additionally, I had previously asked a question on Stack Overflow, but the solution provided did not work, most likely due to it being for an older version of Susy.
I appreciate any assistance that can be provided to rectify this issue!