Responsive Controls

User Interface Responsive Controls

This feature enables you to adapt your user interfaces to various device sizes, such as mobile or tablet, in both portrait and landscape orientations. You can also adjust the resolution manually to test your CSS breakpoints.

How Responsive Controls Work

Using the responsive controls is simple and efficient:

  • Click the mobile or tablet button in the top bar to adapt the UI to the respective resolution in portrait orientation.
  • Click the mobile or tablet button again to switch the orientation to landscape.
  • Click the arrows button in the top bar to fit the UI to your browser’s size.
  • Click the pencil button to reveal a dropdown where you can set your preferred width manually.
  • To adjust the width manually, drag the element on the right side of the UI, and it will adapt to the position where you stop dragging.

Adjust the Width of a Responsive Challenge


The responsive controls feature in the HTML/CSS Challenge Divize editor is an invaluable asset for practicing and refining your responsive design skills. By simulating various device scenarios, you can create and test your responsive user interfaces with ease.