Hi,

Are there classes for conditional rendering based on breakpoints similar to what is available for theme based renderings: Theme Based Rendering | Framework7 Documentation

Hi,

Are there classes for conditional rendering based on breakpoints similar to what is available for theme based renderings: Theme Based Rendering | Framework7 Documentation

For now I just rolled my own:

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {

```
.if-at-least-xs,
.if-at-least-sm,
.if-at-least-md,
.if-at-least-lg,
.if-at-least-xl {
visibility: visible;
}
.if-at-most-xs,
.if-at-most-sm,
.if-at-most-md,
.if-at-most-lg,
.if-at-most-xl {
visibility: visible;
}
```

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {

```
.if-at-least-xs {
visibility: hidden;
}
.if-at-least-sm,
.if-at-least-md,
.if-at-least-lg,
.if-at-least-xl {
visibility: visible;
}
.if-at-most-xs {
visibility: hidden;
}
.if-at-most-sm,
.if-at-most-md,
.if-at-most-lg,
.if-at-most-xl {
visibility: visible;
}
```

}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {

```
.if-at-least-xs,
.if-at-least-sm {
visibility: hidden;
}
.if-at-least-md,
.if-at-least-lg,
.if-at-least-xl {
visibility: visible;
}
.if-at-most-xs,
.if-at-most-sm {
visibility: hidden;
}
.if-at-most-md,
.if-at-most-lg,
.if-at-most-xl {
visibility: visible;
}
```

}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {

```
.if-at-least-xs,
.if-at-least-sm,
.if-at-least-md {
visibility: hidden;
}
.if-at-least-lg,
.if-at-least-xl {
visibility: visible;
}
.if-at-most-xs,
.if-at-most-sm,
.if-at-most-md {
visibility: hidden;
}
.if-at-most-lg,
.if-at-most-xl {
visibility: visible;
}
```

}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {

```
.if-at-least-xs,
.if-at-least-sm,
.if-at-least-md,
.if-at-least-lg {
visibility: hidden;
}
.if-at-least-xl {
visibility: visible;
}
.if-at-most-xs,
.if-at-most-sm,
.if-at-most-md,
.if-at-most-lg {
visibility: hidden;
}
.if-at-most-xl {
visibility: visible;
}
```

}