Learn full-stack web development using fastn in a week
Learn Now
Using Custom Breakpoints
Using Custom Breakpoints
Rithik Seth
posted on:
November 3, 2023 at 3:40 pm
2 mins
Today, in this blog we will see how fastn allows the use of user-defined custom breakpoints. Although currently we can only modify the default breakpoint when using ftd.document.

How to Define a Custom Breakpoint?

To define a custom breakpoint, you will need to define the breakpoint attribute of ftd.document to specify your custom breakpoint width beyond/below which the browser will render the contents in desktop/mobile mode.

Defining Custom Breakpoint

By default, fastn defines the breakpoint width to 768px in case no user-defined breakpoint is specified. Let's say you want to define a custom breakpoint (let's say 800px) for your page. You can do this using the breakpoint attribute of ftd.document. Here is how we can define it.
Sample Usage
-- ftd.document:
breakpoint: 800 

-- ftd.text: Desktop Text
color: blue
text if { ftd.device == "mobile" }: Mobile Text

-- end: ftd.document
In the above example, the browser will show Mobile text when the browser width is equal or below 800px and show Desktop text when the browser width is above 800px. And this is how we can define custom breakpoints for our fastn documents.
Copyright © 2023 - fastn.com