> For the complete documentation index, see [llms.txt](https://docs.harnessgiving.cc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.harnessgiving.cc/dashboard-apps/designer-tools/layout.md).

# Layout

Update the layout of your pages!

We’ve all heard about the power of the first impression. So what’s the key of making that positive impact on the visitors of your site? The answer’s pretty simple: the layout. It plays a primary role in making the website look attractive and eye-catching.

That's what the **Designer Tools** section is all about. It helps you make the page arrangement balanced and harmonious. 

To get things started, go to the layout settings and you’ll see a settings bar available. 

![](https://cdn.elev.io/file/uploads/8Vo2HLhmi4gwFsxjYS0KP5AHta7k606-siFhC6yB9Uc/HScfzK9-TwiUdFDiemjGXZUwnqoaI2Pqyb0Q1byRSTs/1552902689947-WrI.png)

You can change the **Gutter Size**, the **Distance Between Blocks** and **Elements** simply moving the pointers. To change the **Grid Container Width**, push the *Arrow* and select the appropriate options from the drop down menu.

![](https://cdn.elev.io/file/uploads/OebwbWJe8HQsz6o-1LRtFgibhEUqHB-jFgHshb9R1f8/bTIeODw_tMRj5UfvlUDWDSL2KXulMn4psij-ZSPQoMM/Layout-O_E.gif)

**Harness** was built with responsive design in mind, so you can also change the **Distance Between the Blocks and Elements in the mobile** version as well to suit your preferences perfectly. 📱

![](https://cdn.elev.io/file/uploads/HeLMvqWW8CNxIc0ay9t1FhqO1A9ocdW8wMqRfjVXHgs/-mjpGbcoKHKrGWy5ZBuFdJZEU2EV9hqEJs3k6s030ek/Layout_1-tW0.gif)