> For the complete documentation index, see [llms.txt](https://developers.weglot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.weglot.com/wordpress/use-cases/change-flag-size.md).

# 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