Different style sheets & Susy: Tailored designs for varying orientations

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!

Answer №1

Susy is primarily designed to set column widths in percentages, allowing for flexible columns based on the viewport or container size. Using the $container-style: fluid; setting instructs Susy to use percentages for widths and margins, making your layout responsive without changing the number of columns. This simplifies adjustments in media queries as well.

Below is a basic configuration for a 12 column grid:

@import "susy";
$total-columns: 12; // Divisible by 2, 3, 4, and 6
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: $gutter-width;
$container-style: fluid;

These settings are typically kept in a `_base.scss` file and applied to containers using `@include span-columns( X )`, where X is the number of columns to span. Adjustments can be made for different breakpoints in media queries.

While targeting iPads specifically may not align with Responsive Web Design principles, it may be necessary for certain scenarios. Consider exploring alternative methods for device detection, such as examining User Agent strings, for more accurate targeting. You can also refer to this forum discussion for additional insights: A reliable media query to detect only iPad (or at best 1024x768 mobile devices)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Swapping out a style sheet within a intricate header

I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target ...

Customize the appearance of the bootstrap nav-bar by assigning unique background colors to each dropdown menu

I'm looking to set unique background colors for each dropdown in a Bootstrap nav-bar using CSS. .mynavbar .dropdown ul.dropdown-menu:nth-child(1) { background-color: #59b057; } .mynavbar .dropdown ul.dropdown-menu:nth-child(2) { background-col ...

Ways to update the title of a Magento widget

I've added a widget to showcase new products on my Home page and it's displaying perfectly. However, I want to get rid of the title "New Product" that comes with it. This pesky little thing needs to go! https://i.sstatic.net/P0NeS.jpg I'm ...

Placing HTML text on top of a three.js renderer

I have been attempting to overlay HTML text onto my three.js sketch, but adjusting the z-index does not seem to be working. While I know that I could utilize innerHTML, the issue arises when I need to also use the onclick attribute, which is not the main f ...

Alter the arrow to dynamically point towards the location of the click source

I am currently working on creating a popover dialog that should point to the element triggering its appearance. The goal is for the arrow to align with the middle of the button when clicked. While I am familiar with using CSS to create pointing arrows, th ...

Applying FAB (Material UI) to span across 2 columns in a CSS Grid: A step-by-step guide

Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide. import "./styles.css"; import Button from '@mui/materia ...

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

Block of white colors located on the right side beyond the confines of an HTML structure

I am encountering an issue where a white block is appearing outside the HTML on my page. Despite having no content, Firebug indicates that it is located outside the html tag. I suspect the problem may be related to an image that is too wide or padding exc ...

Div that scrolls only when children can be displayed without overflowing

I am seeking a solution to ensure that the children inside my scrollable div are only visible in their entirety. HTML <div id="container"> <div class="child"></div> <div class="child"></div> <div class= ...

The background gently fades away, directing all attention to the popup form/element

After extensive searching, I have yet to find a straightforward solution that seems to be a standard practice on the web. My goal is to create a form that appears in the center of the screen when a button is clicked using CSS or jQuery. I would like the ...

Layering elements using CSS and HTML to create a background effect

I have created a menu using div elements and I want one of the menu items to have a background that extends behind it to the body. Here is the structure: body { background-image: url(path/body.png); } #menu { overflow: hidden; width: 400px; ba ...

Styling div elements to match the dimensions of table rows in CSS

When it comes to CSS, I wouldn't call myself an expert; My question is: is there a way for a div tag to inherit dimensions from specific table rows based on their class or id? For instance: Imagine we have a table with multiple rows, but we don&apos ...

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

How to conditionally set the active class in a React component

I am new to using React and I am encountering some issues. My goal is to add an active class when any of these components are opened. I have attempted a solution but it isn't working as expected. I need assistance in adding a background color to the d ...

Tips for inserting an element in the middle of two elements using HTML

Here is the current structure of my DOM: <body> <h1> </h1> <button> </button> <p> </p> I am trying to dynamically add another p element in between the button and the existing paragraph when the button is cl ...

Flexbox isn't lining up items horizontally as expected

I have been researching flexbox and it seems like it should display in a horizontal row by default. However, no matter what I try, I can't seem to get it to work as expected. I've included the code below. When I remove "display: flex;" from the C ...

Stylesheets do not have the capability to support template tags

Imagine you have created a stylesheet in Django within the static files and everything is working smoothly. However, when trying to use the following line, an error occurs: .PostProfilePic { width: 50px; height: 50px; border-radius: 50%; background ...

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

Is it possible to incorporate a linear-gradient below color as a background for Material UI Chip? linear-gradient(to right bottom, #430089, #82ffa1) The version of Material UI I am working with is v0.18.7. <Chip backgroundColor={indigo400} style={{widt ...