Change flag size

Changing the Weglot flag size with CSS

Because Weglot has grouped all flags within a single file (CSS sprite) for performance, changing the flag size on your website can be a bit tricky.

The flag-N number depends on your flag type: shiny = flag-1, square = flag-2, circle = flag-3. The default rectangle (mat) type has no flag-N class — target .weglot-flags directly in that case.

1st step: With your browser's code inspector, find the CSS properties that set the global flag size. It depends on your flag settings. In this example (setting: circle flags), the properties are:

.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 the width, height and background-size properties with the wanted size.

2nd step: For each flag, find its background-position property and override it. In this example, the background-position properties are:

/* 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, calculate the new value with a cross product using the original size (24px), the wanted size and the 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

/* 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

/* 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