Adjust How Animations (and More!) Show Up on Mobile

Set different animation rules and use custom CSS for desktop and mobile to create the ultimate reader experience on each.

We feel like a broken record at this point, but—in case you’re just catching up—we’ll say it again: your content has got to look great on every kind of screen in order to succeed!

While we’ve worked hard to design a responsive layout that makes designing for desktop and mobile as easy as possible, we get that not everything just magically works perfectly on mobile. That’s why we recently added more options for choosing how your columns show up on mobile. And now, we’re taking it a step further with new features for adjusting animations and custom CSS for smaller screens. Read on to learn more about how to use these options to fine-tune your design and create the perfect reader experience.

Animations

Using animation throughout your page is a great way to draw the reader’s eye and improve engagement, which is why Setka Editor has features for easily adding movement to text, images, or any other content block on your screen.

But sometimes a splashy animation that looks gorgeous on the big screen feels excessive on a phone, potentially irritating a reader and causing them to jump ship (or just have a poor impression of your brand).

 

To prevent that, we’ve added the option to select whether you want each of your desktop animations to show up on mobile or not. In the animations menu, simply toggle on or off the “show animations on mobile” option. Turn them all off, keep them all on, or keep some for visual interest without overwhelming people. Play around and peek at your mobile preview to see what works.

And keep an eye out for more developments here: we’re working on giving you the ability to select a different animation for mobile than desktop, so you can keep the movement but maybe choose something a bit more subtle.

Custom CSS

Advanced designers can take things even further with the new ability to insert custom CSS specifically for mobile or desktop. Using this feature, you can do everything from make a slight change—like adjusting an indent for mobile—to creating significantly different designs for each device. Possibilities for using this feature are only limited by your imagination, but include:

 

Customizing content background 

Easily create different backgrounds for elements on different devices by editing the custom CSS field (instead of having to create two different grids with different visibility on each device).

Adjusting image widths

Love the look of a full-width image on desktop but not mobile? You could, for instance, set it to be just 50% of the screen width on phones.

Customizing font sides

If you have a unique instance where a different font size would look better on one device, you can adjust using this feature. (If you’re looking to create different style rules to use across the board on desktop and mobile, you can do that in your Style Manager.)

Customizing the shape of an object

Have a photo you want round on desktop but a simple square on mobile, or a grid that needs to be wide on desktop but narrow on mobile? Go wild using custom CSS!

To use this feature, click the mobile editor button and toggle the “custom CSS” button on to set unique options for your mobile site.

Try for free

14 days free trial. No credit card required

Get started