Menu
Design
Responsive design
How to make an element look right on phones, tablets and desktops by styling it per screen size.
Your site is seen on screens of every width. Starjay lets you give an element different styles at different sizes, such as a big heading on desktop and a smaller one on phones.
How screen sizes work
Styles are set from small to large. A value set for Phone applies to every size. A value set for Tablet applies to tablets and everything larger, and replaces the Phone value there. So style for phones first, then add changes for larger screens where you need them.
Style an element for different sizes
- 01
See several sizes at once
In the top bar, switch to Breakpoints mode. The canvas shows your page at more than one width side by side, and you can edit in any of them. See Preview different screen sizes.
- 02
Select the element
Click it on the canvas and open the Style panel.
- 03
Set the phone style
In the breakpoint bar, choose Phone, then set the value. For example, set Size to
36. - 04
Set the larger-screen style
Choose the size where the change should start, such as Laptop, and set the new value. For example, set Size to
60. - 05
Check each size
Look at each canvas, or change the canvas width. The value showing at each width comes from the largest breakpoint that's not wider than the screen.
When a change doesn't seem to do anything
If you edit a value and the canvas doesn't change, the canvas is probably showing a value from a different breakpoint. The control shows a warning icon, This won't change what you see, with an explanation such as This setting applies up to 767px, but your canvas is 1280px. Click Switch to the … breakpoint to edit the value that's actually showing.
Review and clean up
- Click See all breakpoints to see every value the element has at every size, side by side. Use + Breakpoint to add a value for another size, and × to remove a size's values.
- Turn on Highlight controls that have breakpoint overrides to outline every control that changes at some size.
Layouts per screen size
The layout tools for flex and grid have their own breakpoint row. Use them to, for example, show one grid column on phones and three on laptops.
Ask the AI for responsive changes
For changes the panel doesn't cover, such as hiding an element on phones or reordering sections on small screens, ask the AI. It can take screenshots at phone, tablet and desktop sizes to check its work.
Hide the large hero image on phones and make the headline
smaller there. Check it on a phone afterwards.