# Change flag size

Because Weglot has grouped all flags within a file (CSS Sprite) for performance, it can be tricky to change the flag size on your website.

**1st step:** With your browser code inspector, find the CSS properties who give the global flags size. It's depends to your flags settings. In this example (setting: circle flags), the finding CSS properties is :

```css
.weglot-flags.flag-3 a::before, 
.weglot-flags.flag-3 span::before {
    background-image: url("../images/circular_flag.png");
    width: 24px !important;
    height: 24px !important;
    -webkit-background-size: auto 24px !important;
    background-size: auto 24px !important;
}
```

Override `width`, `height` and `background-size` properties with the wanted size. 

**2nd step:** For each flag, find his `background-position` properties and override it. In this example, `background-position` properties is :

```css
/* For English flag */
.weglot-flags.flag-3.en > a::before, 
.weglot-flags.flag-3.en > span::before {
    background-position: -2520px 0 !important;
}

/* For Portuguese flag */
.weglot-flags.flag-3.pt > a::before, 
.weglot-flags.flag-3.pt > span::before {
    background-position: -4344px 0 !important;
}
```

To override it, you must calculate the new property with a cross product include original size (24px), wanted size and default `background-position`.

*New background-position = ( Wanted size / Default size ) \* current background-position*

#### Example 1: Smallest flags

**Type of flags:** Circle\
**Languages:** English and Portuguese\
**Wanted size:** 16px \* 16px

```css
/* Customize English flag */
.weglot-flags.flag-3.en > a::before,
.weglot-flags.flag-3.en > span::before {
    background-position: -1680px 0 !important;
}

/* Customize Portuguese flag */
.weglot-flags.flag-3.pt > a::before,
.weglot-flags.flag-3.pt > span::before {
    background-position: -2896px 0 !important;
}

.weglot-flags.flag-3 a::before,
.weglot-flags.flag-3 span::before {
    width: 16px !important;
    height: 16px !important;
    -webkit-background-size: auto 16px !important;
    background-size: auto 16px !important;
}
```

Calculation for English flag: (16/24)\*-2520 = -1680\
Calculation for Portuguese flag: (16/24)\*-4344 = -2896

#### Example 2: Biggest flags

**Type of flags:** Circle\
**Languages:** English and Portuguese\
**Wanted size:** 48px \* 48px

```css
/* Customize English flag */
.weglot-flags.flag-3.en > a::before,
.weglot-flags.flag-3.en > span::before {
    background-position: -5040px 0 !important;
}

/* Customize Portuguese flag */
.weglot-flags.flag-3.pt > a::before,
.weglot-flags.flag-3.pt > span::before {
    background-position: -8688px 0 !important;
}

.weglot-flags.flag-3 a::before,
.weglot-flags.flag-3 span::before {
    width: 48px !important;
    height: 48px !important;
    -webkit-background-size: auto 48px !important;
    background-size: auto 48px !important;
}
```

Calculation for English flag: (48/24)\*-2520 = -5040\
Calculation for Portuguese flag: (48/24)\*-4344 = -8688


---

# 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://developers.weglot.com/wordpress/use-cases/change-flag-size.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.