Articles on: Platform Design - CMS

CMS Styling - Designing for Mobile vs iPad/Desktop View

Customers will view your platform on various devices, ranging from small mobile device screens all the way to large desktop monitors, so it's important that your platform looks great when viewed on any device.

The default setup and styling that we've applied in our platform editor allows many of the components to adapt well for various screens sizes, but there are some situations where you may need to manually edit some styling for it to be optimized.

When you add any styling (e.g. text-lg ), this styling will be applied at all screen sizes.

When you need to apply different styling for different screen sizes, you should use the "breakpoint" prefixes to define what style applies for what screen sizes. You can find the full list of breakpoint prefixes at https://tailwindcss.com/docs/responsive-design .

Sometimes you won't need to apply any breakpoint styling. When you do need to apply it, in 99% of cases, it will be sufficient to define only one breakpoint, using sm:### (which affects screen sizes 640px or larger - a typical max size of mobile devices), together with a default styling using ### (i.e. without any breakpoint, which will therefore be applied to screen sizes smaller than 640px). This allows you to define a different styling for mobile devices vs other devices.

When you add a styling using this breakpoint (e.g. sm:text-2xl ), this styling will be applied when the device has a screen size larger than 640px.

Intuitively you might think that "sm" means this styling applies to "small" devices, however this is not the case, because Tailwind functions using mobile-first design. It's important to remember that any breakpoint styling you use will be applied at devices larger than that breakpoint screen size.

As shown in the example above, this breakpoint styling is often useful for texts, where you want the text to be smaller for mobile view (e.g. text-lg ) and larger for iPad/Desktop view (e.g. sm:text-2xl ).

Other examples where we commonly use breakpoint styling is for sponsor/partner logos and for buttons.

For sponsor/partner logos, you might want the logos to be smaller for mobile view (e.g. h-24 and w-24 ) and larger for iPad/Desktop view (e.g. sm:h-36 and sm:w-36 ). You might also want the margins between each logo to be smaller for mobile view (e.g. m-2 ) and larger for iPad/Desktop view (e.g. sm:m-4 ).

Likewise for buttons, you might want to adjust the text size, the button size/padding and the margins, so that your buttons will look great on all screen sizes!

These breakpoints can be applied to absolutely any styling that you add on the platform, and you may notice it applied by default to some components, for example the Vertical Grid Feed, which has a different number of columns depending on the screen size.

In the platform editor, you can click the icon in the top right to switch between the preview mode for desktop and the preview mode for mobile, as shown below.

Save and publish

After making in changes in the platform editor, always remember to press "Save section" at the bottom left to save your changes and get a preview to the right.

If you are happy with your changes press "Publish" to make them live on the platform. You could also press "Discard" to delete all your changes after last time you published.

Updated on: 07/11/2024

Was this article helpful?

Thank you!