> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.devit.software/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Label size, shape and position on desktop, tablet and mobile

# ${color}[#204a87](Label size, shape and position on desktop, tablet and mobile)

${color}[#3465a4](**In this article:**)
* [How Lably picks desktop, tablet or mobile settings](#1-how-lably-picks-desktop-tablet-or-mobile-settings)
* [Which settings can differ per device](#1-which-settings-can-differ-per-device)
* [Choose the shape first](#1-choose-the-shape-first)
* [Set the label size](#1-set-the-label-size)
* [Which size unit to use](#1-which-size-unit-to-use)
* [Set the text size: px, em or rem](#1-set-the-text-size-px-em-or-rem)
* [Set the corner and margin](#1-set-the-corner-and-margin)
* [How to check the result](#1-how-to-check-the-result)
* [Fine-tune one spot with custom CSS](#1-fine-tune-one-spot-with-custom-css)

A label can look perfect on a computer and cover half the product photo on a phone. Lably lets you set the size, text size and margins separately for **Desktop**, **Tablet** and **Mobile**. This article explains how these settings work, which units to choose, and what to do when one spot still needs a different size.

# ${color}[#204a87](How Lably picks desktop, tablet or mobile settings)

Lably chooses the settings by the **type of device**, not by the width of the browser window:

* **Mobile:** phones.
* **Tablet:** tablets (iPad, Android tablets) and touchscreen devices with a screen narrower than 1366 px.
* **Desktop:** everything else, including a desktop browser window that you make narrow.

|| Making your browser window narrow doesn't switch the label to the mobile settings. To see what customers see on a phone, use a real phone or the device mode in your browser (see [How to check the result](#1-how-to-check-the-result)).

# ${color}[#204a87](Which settings can differ per device)

Look for the device switcher with three icons: **Desktop**, **Mobile** and **Tablet** (hover over an icon to see its name). It appears next to these settings:

* **Styles > Size:** label width and height.
* **Styles > Text style > Size:** text size.
* **Styles > Spacing > Padding:** the space inside the label.
* **Position > Margin:** the distance from the edges of the product image.

Everything else is the same on all devices: shape, colors, corner radius, rotation and the corner the label sits in.

The switcher shows one device at a time. Pick a device first, then change the values. Until you change the text size, padding or margin for Tablet or Mobile, they use the Desktop values. Size is different: each device always has its own width and height.

# ${color}[#204a87](Choose the shape first)

1. Open the label and go to **Styles > Shape**.
2. Click the shape dropdown and select a shape.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/label-shape-picker_1le3yo4.png =800x382)

||| Changing the shape resets the size on all three devices and moves the label to the corner that suits that shape. Choose the shape first, then set the size and position.


Default sizes after you pick a shape:

* **Rectangle, Parallelogram, Tag and Chev shapes:** 125 × 50 px (Desktop), 80 × 40 px (Tablet), 60 × 30 px (Mobile).
* **Trapezoid, Triangle, Square and Circle:** 125 × 125 px (Desktop), 80 × 80 px (Tablet), 60 × 60 px (Mobile).

Corner shapes such as **Trapezoid top right** or **Triangle bottom left** are designed for their own corner. If you move them to another corner, they won't line up with the image edge.

# ${color}[#204a87](Set the label size)

1. Go to **Styles > Size**.
2. Next to **Label size**, select the device: **Desktop**, **Mobile** or **Tablet**.
3. Enter the **Width** and **Height**, and choose the unit: **px** or **%**.
4. Repeat for the other two devices.
5. Click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/label-size-per-device_9licaj.png =800x382)

A few things to know:

* **Small**, **Medium** and **Large** set the width and height to the same value (for example, 100 × 100 px). They change only the selected device. They suit square shapes. For Rectangle, Tag and similar shapes, enter the width and height yourself.
* **Lock aspect ratio** keeps the proportions: when you change the width, the height changes with it.
* Switching between **px** and **%** doesn't convert the numbers. For example, 125 px becomes 125%, so enter new values after you switch.
* A new label starts with the same size on all three devices. Make sure you set the Tablet and Mobile sizes too.
* For a text label with **Text scroll** set to **Never**, the width works as a minimum. If the text is longer, the label grows to fit it. To keep long text inside a fixed width, choose **Long Text** or **Always** in **Label > Text scroll**.

# ${color}[#204a87](Which size unit to use)

* **px:** a fixed size. The label is the same size on a large product page photo and on a small collection card. It's easy to predict, but you have to set each device yourself.
* **%:** a share of the product image. Width is a percentage of the image **width**, and height is a percentage of the image **height**. The label grows and shrinks with the image.

Use **%** if you want the label to keep the same proportion to the photo everywhere. Use **px** if the label must be exactly the same size on the product page and on collection cards. With **%**, keep in mind that a tall (portrait) image makes the label taller too.

# ${color}[#204a87](Set the text size: px, em or rem)

1. Go to **Styles > Text style**.
2. Next to **Size**, select the device.
3. Enter the text size and choose the unit: **px**, **em** or **rem**.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/text-size-per-device_3ubrm5.png =800x384)

* **px:** a fixed text size. The best choice in most cases.
* **em:** relative to the text size of the theme block where the label sits. `1em` is the same size as that text.
* **rem:** relative to the base text size of the whole theme.

The result of **em** and **rem** depends on your theme. For example, on Dawn-based themes `1rem` is 10 px and `1em` is 16 px, so the same number gives a different size. If you're not sure, use **px**.

|| When you make the label smaller for Mobile, make the text smaller for Mobile too. Otherwise the Mobile label uses the Desktop text size, and the text may not fit. 

# ${color}[#204a87](Set the corner and margin)

1. Go to **Position**.
2. Under **Corner**, select one of the 9 positions. It applies to all devices.
3. Next to **Margin**, select the device and enter **Top**, **Bottom**, **Left** and **Right**, in **px** or **%**.
4. Click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/position-corner-margin_ib2u40.png =800x382)

Margin moves the label away from the edges of the image. A margin in **%** is a share of the image **width** (also for Top and Bottom). On small mobile cards, a smaller margin (or 0) usually looks better than the desktop value.

# ${color}[#204a87](How to check the result)

The preview in the editor shows the size for the selected device, but always on the same large product image. Always check the real store:

1. Save the label and make sure it's **Published**.
2. Open your store in Google Chrome and press **F12** (or right-click the page and select **Inspect**).
3. Click the device icon (**Toggle device toolbar**) at the top of the panel, or press **Ctrl+Shift+M** (**Cmd+Shift+M** on a Mac).
4. In the device list at the top of the page, select a phone (for example, **iPhone 16 Pro**) and reload the page. Then select a tablet (for example, **iPad Pro**) and reload again.

Changes can take a few seconds to reach your store. If you still see the old size, wait a moment and reload.

# ${color}[#204a87](Fine-tune one spot with custom CSS)

Sometimes it's hard to get one size that looks right on desktop and on mobile at the same time. For example, the label is too large on the product page but fine on collection cards. If all other places already look good, changing the label settings could break them. In that case, a small CSS rule in your theme can resize the label in just the place that needs it.

**1. Choose which items the rule targets.**

* **One label or badge:** use its ID. Open a page with the label, right-click it and select **Inspect**. On the highlighted element, find `data-id`, for example `data-id="AP737089"`. The selector is `[data-id="AP737089"]`.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/screenshot2_s7bapl.png =800x373)

* **All labels and badges:** use `[class^="_lably_item"]`. Every Lably item has a class that starts with `_lably_item`, so this one selector covers all of them, and also any items you add later. Use it when the same fix is needed for more than one label or badge, instead of listing each ID.
* **All items inside one block:** put the block's class or ID in front, for example `#product-grid [class^="_lably_item"]` for the product grid on a collection page. Find the block's class or ID with **Inspect**, the same way as above.

**2. Choose where the rule applies.** Lably marks every item with its placement. Add it to the selector:

* `[data-lably-placement="main"]`: the main product on the product page.
* `[data-lably-placement="secondary"]`: product cards in collections, on the home page, in related products and similar sections.

**3. Write the rule.** Use `scale` to make the item smaller or bigger. Text, shape and padding change together.

Make one label 30% smaller on the product page only (replace `AP737089` with your label ID):

```
[data-id="AP737089"][data-lably-placement="main"] {
  scale: 0.7;
  transform-origin: top right;
}
```

Make all labels and badges on product cards 20% smaller when the screen is narrower than 750 px:

```
@media (max-width: 749px) {
  [class^="_lably_item"][data-lably-placement="secondary"] {
    scale: 0.8;
    transform-origin: top right;
  }
}
```

A CSS `@media` rule checks the window width, not the device type. It also works for a narrow desktop window, which Lably's own settings treat as Desktop.

**4. Set** **`transform-origin`** **to match the label corner.** This keeps the label in its corner while it resizes:

* Top left, Top center, Middle left, Middle center: `top left`
* Top right, Middle right: `top right`
* Bottom left, Bottom center: `bottom left`
* Bottom right: `bottom right`

If a rule with `[class^="_lably_item"]` covers labels in different corners, write a separate rule for each corner, using the label IDs, so each one keeps its place.

**5. Add the rule to your theme.**

1. In Shopify admin, go to **Sales channels > Online Store** and click **Edit theme**.
2. Click the gear icon to open **Theme settings**.
3. Scroll down and open **Custom CSS**.
4. Paste the rule into the **CSS** field and click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/2/7/1/3271b421d88bd400/theme-settings-custom-css_13xci3c.png =800x450)

The field adds styles to your entire online store and holds up to 1500 characters. If there is already CSS in the field, add your rule below it. Don't replace it.

|| Before saving, you can check how many items a selector matches. Open your store, press **F12**, go to the **Console** tab, type `document.querySelectorAll('[class^="_lably_item"]').length` and press **Enter**. A number such as `12` means the rule will apply to 12 items on this page. `0` means nothing matches, so check the selector.

If your theme has no **Custom CSS** field, or the rule has no effect, contact us at support@devit.software. Include the page link and describe where the size should be different.

# ✔️ Next step

Check our articles to learn more about the app's functionality:

* [Labels or badges not showing? Use a custom CSS selector](https://help.devit.software/en/article/custom-css-selector-1sz5h32/)
* [My labels are not showing - what should I do?](https://help.devit.software/en/article/my-labels-are-not-showing-what-should-i-do-sdc4gh/)
* [Getting Started in Lably](https://help.devit.software/en/article/getting-started-in-lably-15l9psm/)