This article will walk you through common Foxify Styles options that you can find in most elements.
## Typography
In this dropdown, you can edit and customize the text-related settings of the element.
* Choose your preferable font from a variety of options:
* Adjust an element's font weight, color, size, line height, and text alignment with ease.
* Click **More settings** to set the text's letter spacing, transformation (uppercase, Title case, lowercase), style (regular/*italic*) and decoration.
## Layout
Quickly fine-tune your content layout by selecting the option **Enable auto layout**.
Use the **Wrap children** option to wrap to additional lines when they no longer fit on the initial line.
* The element(s) that don't fit will wrap to the bottom-left in the parent element.
## Spacing
With Foxify, control of the element's margin and padding is easy.
Margin and padding create spacing around your content and elemen.
{% embed url="" %}
Margins create extra space around the element, while padding pushes the content deeper inside the element border.
You can decide to use the same value for all four dimensions: top, right, bottom, and left, or adjust them separately.
{% tabs %}
{% tab title="Spacing settings - Uniform values" %}
{% endtab %}
{% tab title="Spacing settings - Separate values" %}
{% endtab %}
{% endtabs %}
You can also select the size unit you want to use: **px**, **rem**, or **em**. Want to know more about these measurement units? See this article:
{% content-ref url="/pages/noqAEdBFGRwMOnjWdRHL" %}
[Should I use Pixel, Rem, or Em?](/foxify-app/faqs-and-troubleshooting/faqs/should-i-use-pixel-rem-or-em.md)
{% endcontent-ref %}
## Sizing
In this setting, you can change the section width and height of the element.
The recommended size for each element is already filled in the field.
{% hint style="info" %}
You can also click on the image and drag it to resize directly.
{% endhint %}
If you decide on using dimensions to your liking, remember to double-check to make sure the new dimensions work out across different devices.
To create a customized experience for shoppers, click on the device selector icon to set the dimensions on different screen sizes.
The **More settings** button allows you to set the minimum and maximum values for the selected element width and height.
Similar to spacing, both **px**, **rem**, or **em** are available.
## Background
The **Background** section lets you change the element's background using a [color](#background-color) or an [image](#undefined).
### Background color
* Choose from your predefined colors list in [Global styles](/foxify-app/page-management/global-styles.md).
* Select a color from the color palette or input a [hex color code](https://htmlcolorcodes.com/).
### Background image
Click on **Select image** to use an image as a background. You can select one from existing images (in your [Shopify Files](https://domain.myshopify.com/admin/settings/files)), free images, or upload a new image.
In **More settings**, you can find more options to adjust different properties of the background:
#### Background attachment
The background-attachment property in CSS sets whether a background image's position is fixed within the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport), or scrolls with its containing block.
**Fixed**: The background image stays fixed no matter what.
**Scroll**: The background image scrolls with the main view, but stays fixed inside the local view.
**Local**: The background images scroll with the element's content.
{% hint style="info" %}
Still not sure how the three values work? Check out this [demo](https://css-tricks.com/almanac/properties/b/background-attachment/).
{% endhint %}
#### Background size
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
**Auto:** Default value. The background image is displayed in its original size.
**Contain**: Resize the background image to make sure the image is fully visible.
**Cover**: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
{% hint style="info" %}
Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency.
{% endhint %}
For example: the image we're using is 1000 x 512 px, jpg. format.
{% tabs %}
{% tab title="Background size: Auto" %}
{% endtab %}
{% tab title="Background size: Contain" %}
{% endtab %}
{% tab title="Background size: Cover" %}
{% endtab %}
{% endtabs %}
#### Background repeat
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
This setting works with **Auto** and **Contain** background size.
* Repeat: tile the image in both directions
* Repeat x: tile the image horizontally
* Repeat y: tile the image vertically
By default, the background image is set as no repeat.
For example: the image we're using is 250 x 200 px, jpg. format.
{% tabs %}
{% tab title="Background repeat: Repeat" %}
{% endtab %}
{% tab title="Background repeat: Repeat x" %}
{% endtab %}
{% tab title="Background repeat: Repeat y" %}
{% endtab %}
{% endtabs %}
#### Background position
This setting allows you to move your background image around within its container.
There are 9 options to place your background image:
* Top left/ top center/ top right
* Middle left/ middle center/ middle right
* Bottom left/ bottom center/ bottom right
## Borders
You can add and adjust the element's border in Styles settings.
**Border style:** Choose from 3 available styles: **Solid line**, **Dotted line**, and **Dashed line**. By default, an element is set as no border.
{% tabs %}
{% tab title="Solid line" %}
{% endtab %}
{% tab title="Dotted line" %}
{% endtab %}
{% tab title="Dashed line" %}
{% endtab %}
{% endtabs %}
**Border color**
* Select from predefined [global styles colors](/foxify-app/page-management/global-styles.md#colors).
* Choose from the color palette or use a hex color code.
This section also allows you to control the width of the border and its roundness using **Border width** and **Border radius** settings.
## Effects
This section is for modifying the opacity of the whole section. Simply tweak the toggle to adjust it.
## Custom CSS
Changes you made in Styles settings will be shown here.
You can edit the CSS code in **Custom CSS** and the changes will be reflected in the settings.
Here is one example:
---
# 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://docs.foxecom.com/foxify-app/legacy-editor/page-editor/styles-settings.md?ask=
```
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.