Implementing a two column stacked layout with Susy, similar to the design of Twitter's interface

Having worked extensively with Susy, I recently encountered a unique use case that has left me puzzled. To illustrate my point, let's take Twitter as an example.

If we observe their website layout, they have a standard three-column design with a breakpoint at 1250. Once this threshold is crossed, the entire rightmost column 3 shifts below column 1.

I am curious about achieving this effect using pure CSS in Susy 2. Upon inspecting Twitter's implementation, it appears as though they are physically relocating the content from column 3 to column 1. While JavaScript might be involved in their process, I am interested in exploring cleaner alternatives. Any suggestions?

csssusy-compasssusy-sasssusy

Answer №1

It appears that incorporating the breakpoint as a mixin for my columns was the solution to the issue. By adding

@import "breakpoint";

@include breakpoint (define new screen size here) {
.right span (5 of 13);
.left span (8 of 13 last);
.middle span (5 of 13);
}

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

What are the steps to creating a webpage with scrolling in HTML?

Essentially, I have a question that may sound similar to others, but please hear me out. What I am looking for is the ability to have one photo fixed in place while being able to scroll within it. To provide a better understanding, here is an example: www. ...

htmlcss

Achieving an oval shape using HTML5 and CSS3: Step-by-step guide

<!DOCTYPE html> <head> <title> Oval shape</title> </head> <body> <div style="width:400px; height:400px; background-color:#ff0;">Oval</div> <p> Exploring the creation of an oval shape using HTML5 ...

htmlcsscss-shapes

What is the best way to center text within a div that is wider than 100%?

On my webpage, I have a header set to 100% width and text positioned on the banner. However, when zooming in or out, the text's position changes. How can I ensure that the text stays in place regardless of zoom level? Example: jsfiddle.net/5ASJv/ HT ...

csshtml

Collecting data from an HTML form filled out by users

I need a way to capture user input from an HTML form and display it later on my website. I want to show all the information users provide along with their pizza selections. I've been struggling for hours trying to make this work without success :( Spe ...

javascripthtmlcss

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double ...

htmlcss

What are the steps to design a versatile gallery page that can serve various projects?

Allow me to get straight to the point. What is my goal? I am aiming to develop galleries for various projects. Each project's thumbnail on the main page should open a gallery as a new page. These galleries will all have the same layout but different ...

javascriptphphtmlcssgallery

Each column has its own scroll bar, making use of 100% of the available space within a container that is 100%

I am attempting to create 3 columns, each with its own scroll bar, while also taking up 100% of the available space. However, I am facing issues where there is either no scroll bar present or the columns are not occupying 100% of the available space. It ...

csstwitter-bootstrap-3bootstrap-5

modify CSS style once the modal has been hidden

Is there a way to change the default background color of my table row back to normal after closing the modal window that appears when I click on it? <tr class='revisions'> <td>{{ $revision->date_of_revision->format(' ...

jquerycsslaravel-5bootstrap-modallaravel-blade

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

htmlcss

Issue with vertical navigation bar

Currently working on creating a vertical navigation bar without any styling. It's challenging to figure out how to align the items properly side by side. You can check out the basic functionality at . When clicking on 'Android', I want the g ...

htmlcss

Employing the power of JavaScript to enable the seamless toggle of an overlay

I have a div named "navbar_menu". On clicking this div, I want the visibility of the div named "nav_overlay" to fade in. Upon another click, I want it to fade back and become invisible again. Currently, I have set the div 'nav_overlay" to have ' ...

javascriptjqueryhtmlcss

Looking to add elements to a specific div dynamically using jQuery? Let's explore how to insert comments seamlessly

I would like to implement a comment system that adds entered comments to a specific div. Here's the code I have so far: <ul class="comments"> <li> <a class="commenter_name" href="/">Dushyanth Lion</a> ...

javascriptjqueryhtmlcss

Adding an event listener to the built-in arrow buttons on the `<input type=number>` element is a simple way to enhance user interaction

<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...

javascripthtmljquerycssevents

Safari doesn't seem to recognize z-index property

Currently, I am utilizing a responsive template to develop a website. An issue arises in Safari where the footer overlaps the navigation bar at the bottom of the page, despite being positioned above it earlier. It appears that the z-index attribute is not ...

htmlcsssafariz-index

What is the best way to apply the CssClass "active" when clicking on a link

How can we update the cssClass of a link button on each click event, considering that the page refreshes every time? Currently, when I click on any LinkButton, the default behavior sets the cssClass to Plus LinkButton. ---index.aspx----------- <ul cl ...

javascriptasp.netcssvb.net

Placing two parent flex containers on top of each other

I'm in a situation where I have two .container elements, both set at a height of 50%. Within these containers are the child divs .element, which belong to their respective parent divs .container. The problem arises when applying media queries with f ...

htmlcss

Creating a fixed column in an Angular Material Table for enhanced user experience

Has anyone found a method to implement a sticky first column in Angular Material using CSS? Check out the editable Stackblitz code here. I attempted to modify this approach from https://jsfiddle.net/zinoui/BmLpV/, but encountered issues where the first c ...

cssangularangular-material-5

Matching stroke-dashoffset in SVG between two distinct paths

I am currently working on animating stroke-dashoffset for two different paths to create a drawing effect. There are buttons provided to adjust the stroke-dashoffset values. My goal is to ensure that the filled paths align vertically as they progress. Is t ...

javascripthtmlcsssvg

css content exceeds div boundaries

Hello, I am experiencing an issue with my webpage located at . When I zoom out, the content overflows from its containing div. Setting the height to auto or 100% works fine, but the left column ends up being smaller than the right one, and using clear do ...

css

Navigation Menu Dropdown Present on the Right Side and Arranged in a Horizontal Stack

I'm having trouble with a dropdown menu in my navigation bar. I followed the example on W3Schools but when I hover, the menu appears horizontally instead of vertically and to the far right of the page. I've searched for solutions but can't s ...

htmlcssnav