Woorise pages automatically adapt to different screen sizes, but sometimes you’ll want more control over how a specific block looks on desktop, tablet, or mobile.
Responsive styles let you adjust supported design settings for each screen size independently. For example, you might reduce spacing on mobile, change the alignment on smaller screens, or use a different background color for a section.
Desktop acts as the default design. You can then switch to Tablet or Mobile and change only the styles that need to be different.
How to add responsive styles
- Open the page you want to edit.
- In the editor, click the View icon in the top-right corner and enable Responsive styles.
- With Responsive styles enabled, use the viewport selector in the same toolbar to switch between Desktop, Tablet, and Mobile.
- Select the block you want to customize, then adjust its style settings for the selected viewport.
- Repeat for any other viewport where you want the block to look different.
- Any styles you don’t change for Tablet or Mobile will continue to use the default Desktop styles.
To preview your responsive changes outside the editor, open the page in your browser and resize the window or use your browser’s device preview tools to check how it looks on desktop, tablet, and mobile.