# Breakpoints in Creght | Creght Visual Documentation

> Breakpoints allow you to adapt your design across PC, Tablet, and Mobile screens. Here’s how to use them: Step 1: Adjust Text Size When designing on PC, a headl…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)Help Center](/help)

[Changelog](/blogs)

[AI](/docs/ai/quick-create-first-website) [Visual](/docs/get-start)

Basic

- [Get to Know Creght in 2 Minutes](/docs/get-start)
- [How to Register for Creght](/docs/signup)
- [Creating a Project in Creght](/docs/create-site)
- [Templates](/docs/tpls)

Design

- [Using the Editor](/docs/editor)
- [Basic Operations](/docs/operating)
- [Layouts in Creght](/docs/layout)
- [Position in Creght](/docs/position)
- [Size in Creght](/docs/size)
- [Breakpoints in Creght](/docs/breakpoint)
- [Overlays](/docs/popover)
- [Components in Creght](/docs/components)
- [Adding Third-Party Fonts](/docs/tp-font)
- [Duplicate and Deep Copy](/docs/deep-copy)

CMS

- [CMS (Content Management System)](/docs/cms)
- [Importing WeChat Official Account Articles into CMS](/docs/wxmp)

Site Setting

- [Page Settings](/docs/page-setting)
- [How to Upgrade a Plan](/docs/manage-plan)
- [SEO Settings](/docs/seo-setting)
- [Small Files (Site Verification)](/docs/verification-file)
- [Adding a Custom Domain in Creght](/docs/custom-domain)
- [How to Complete ICP Filing](/docs/beian)
- [Server Nodes](/docs/website-node)
- [How to Switch Sites](/docs/pxrp79jqtnyq)
- [Localization](/docs/localization)

AI

- [About Creght AI](/docs/creght-ai)

Tool

- [Convert Figma Designs into Live Websites](/docs/figma-to-creght)
- [3 Guidelines for Responsive Figma Layouts](/docs/figma-autolayout)
- [Covert Figma to live website](/docs/response-site)
- [Figma to Responsive Website: Interactions](/docs/figma03)
- [Compressing Video with FFmpeg](/docs/ffmpeg)
- [How to Add Clarity to Your Website](/docs/clarity)
- [Creating a Button Hover Effect](/docs/button)
- [How to Build a Reusable Collapsible FAQ Panel](/docs/collapse)
- [Responsive Navigation Tutorial](/docs/nav)

Design/

# Breakpoints in Creght

Breakpoints allow you to adapt your design across PC, Tablet, and Mobile screens. Here’s how to use them:

### Step 1: Adjust Text Size

When designing on PC, a headline set to **60px** looks great. But on Mobile, it may appear too large.

- Switch to the **Mobile breakpoint**.
- Reduce the font size (e.g., from 60px to a smaller size).

Creght provides three default breakpoints: **PC, Pad, and Mobile**.

You can also click the **“+”** button in the breakpoint bar to add system presets or create custom breakpoints.

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/machQVdlDeP__image.png)

### Step 2: Change Layouts

Different devices call for different layouts:

- **PC:** More space → content arranged horizontally.
- **Mobile:** Limited width → content arranged vertically.

To achieve this:

- Select the container (Frame).
- At the **PC breakpoint**, set direction to **horizontal**.
- ![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/machSDpfxTa__image.png)
- At the **Mobile breakpoint**, set direction to **vertical**.
- ![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/machSXxJlqZ__image.png)

### Step 3: Use Component Variants

For shared elements like navigation, you may want different versions for PC and Mobile.

1. Create a navigation component with two variants: **PC** and **Mobile**.

![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/machTEnsagn__image.png)

(Tip: You can find a navigation template in **Insert Panel → Header**.)

2. Switch to the **Mobile breakpoint**.
3. Select the **Mobile variant** for the navigation.
4. ![image.png](https://fsb.huglight.cn/project/mtdDqMgsnYi/machTZjFiCO__image.png)

Now your navigation adapts seamlessly across devices.

### ✅ Summary

Breakpoints make your website responsive and user-friendly.

They allow you to:

- Adjust font sizes for different screens
- Reorganize layouts for better readability
- Swap component variants to match device needs

With just a few breakpoint settings, your site will look great on any device.

On this page

- [Step 1: Adjust Text Size](#step-1-adjust-text-size)
- [Step 2: Change Layouts](#step-2-change-layouts)
- [Step 3: Use Component Variants](#step-3-use-component-variants)
- [✅ Summary](#summary)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

This website is built with [Creght](/)

[Discord](https://discord.gg/Qvq2nmZNnb)

## Links

- [Pricing](/price)
- [Solutions](/solution)
- [Customers](/customers)
- [Help Center](/help)
- [Contact Us](/contact)
- [Blog](/blogs)
- [Refund Policy](/tuikuan)

## Resources

- [All Resources](/resources)
- [Templates](/templates)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/effects)
- [Figma to Creght](/figma2creght)
- [API for AI](/api)

## Terms

- [Terms of Service](/legal/terms)
- [Privacy Policy](/legal/privacy)
- [Acceptable Use Policy](/legal/acceptable-use)

## Social Media

- [Twitter](https://twitter.com)
- [Facebook](https://www.facebook.com)
- [LinkedIn](https://www.linkedin.com)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)