Size Matters. The X Image Guide

Roy AngerUpdated:


The low down on this article: It has about 3400 words and will take 16-20 minutes to read. You probably want a coffee to go with it. As we chase site performance all too often we find that image size and quality clash with site performance. We want our sites to look amazing, but that comes with a cost. Images can quickly become the largest part of the site. For fun, I dropped the text from a 18 page article draft into a post. That 18 pages of content increased … Read More

Swap Columns on Mobile

Michael BourneUpdated:


How can I swap columns on mobile? That question has been asked so many times, but sadly the answer has never been consistent. I’m going to show you two ways to achieve the effect of swapping columns on mobile with this tip. How I swap columns. I want to preface that there are a few methods to achieve this, and no one way can be called “more correct” than the other. Ever since I originally posted the CSS needed to do this in the X Users group, X has changed … Read More

Create Columns with Equal Heights

Roy AngerUpdated:


A common request we see on the X Theme Users forum is to create equal height columns in Cornerstone. We’re going to cover three ways to do this in X. Yup, three ways! A little bit of CSS, added either to the page if you want it for one page, or to the Customizer if you want it for multiple pages, gives you the building block you need. Then add the class ‘flexmethod’ to the row (not the column). Its quick. Unlike the JavaScript method it shows equal height columns … Read More

Flexbox Flip Card Grid

Michael BourneUpdated:


A few weeks back, an X user was asking about making his flip card grip responsive, as well as clearing up issues with text size forcing the flip cards to extend past their parent container. I took his layout and made it into a flexbox, allowing for full fluidity and responsiveness. The setup on this one is quite simple. Create a new section containing a single row and column, and give that column the custom class flexcards. Inside this column, place as many flip card elements as you need. The … Read More

Responsive Cornerstone Timeline

Michael BourneUpdated:


Time and time again I see X users asking about creating a timeline in Cornerstone. Truthfully, there are plenty of free and premium plugins that can do this. But what about users that prefer to not use a plugin? Well, how about a simple, clean, and responsive timeline using only Cornerstone and CSS. That’s what I have made here. Your first step is to create a new section in Cornerstone. For each row, split into two columns and disable marginless columns in the row settings. The setup is simple: in … Read More