I'm working on a web app builded in Django and React, I've a question about to change the width and height of my Lottie img when the screen change Its size. That's my Lottie configuration:
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animation,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice"
}
}
<div id='lottie-container'>
<Lottie
id='lottie-icon'
options={defaultOptions}
/>
</div>
That's CSS media query:
/*------|
Desktop |
-------*/
@media screen and (min-width:991px) {
/* LOTTIE */
#lottie-icon{
width: 400px;
height: 400px;
}
}
/*-----|
Mobile |
------*/
@media screen and (max-width:991px) {
/* LOTTIE */
#lottie-icon{
width: 200px;
height: 200px;
}
}
Your issue here seems to be the way you assign an id to your Lottie component.
Here is how you can assign a class / id to your generated svg element (according to this):
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animation,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
className: "lottie-svg-class",
id: "lottie-svg-id"
}
}
Then you can manipulate its size in your CSS, either by using media queries or using vw / vh.
You will need to add !important tags though in order to override the style properties of the svg:
.lottie-svg-class{
width:calc(max(500px, 40vw))!important;
}
Try to add only to your media query:
@media only screen and (max-width: 600px) {
}
you can also try to use vw and vh or percentage instead of px. I usually tend to use them for responsiveness.