# Layout

The **Layout settings** in your theme allow for control over the width, spacing, and corner radius of elements on your store, ensuring a cohesive and customizable design.

<figure><img src="/files/jQSfcEz3Tv9Y9GFTeWPe" alt=""><figcaption></figcaption></figure>

### **1. Page width**:

Adjust how far the sections span across the page. Set the maximum width that your online store will display at using these options: 1200px, 1400px, 1600px, 1800px.&#x20;

**Behavior based on screen width:**

* **When Screen width > Page width:** The section width remains at the selected page width, even if users increase their window or browser width.
* **When Screen width < Page width:** Left and right margins are fixed (non-zero), ensuring sections don’t span full width.

**Example:** If you set the page width to 1400px and view the store on a 1920px screen, the section width will stay at 1400px. On smaller screens (e.g., 768px), margins will ensure the section maintains a visually balanced width.

### **2. Spacing**:

Adjust the margins between sections on both desktop and mobile devices:

* **Space between sections on desktop** (from 0 to 100px): Controls the margin between sections for desktop views.
* **Space between sections on mobile** (from 0 to 100px): Ensures mobile-optimized spacing while maintaining a clean layout.

### **3. Corner radius**:

Fine-tune the roundness of the corners for various elements throughout your store. Range for corner radius: 0px ➝ 40px. **Elements affected:**

* **Buttons:**
  * Buttons in sections like Rich text, Image banner, Grid, etc.
  * Quick add buttons, Buy buttons on product pages.
  * Variant picker block (when in button layout).
* **Content:**
  * Images, videos, and product media displayed on the product page.
  * Sections with content containers like Multicolumn, Image with text, etc.&#x20;
  * Images of products in sections like Featured collection, Collection tabs, Shop the look, and Product grid in the Collection page.
  * Images of collections in the Collection list section and on the Collections list page.
  * Blog images in the Blog post page & Blog posts section.
* **Badges:** Sale badges, Sold out badges, and Custom badges.
* **Dropdown and popups**
* **Country flags.**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/theme-settings/layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.