Widget not resizing after orientation shift without refreshing

Hi there,

I have set up media queries for my testimonials widget.

    }

    @media only screen and (min-width: 901px) {
    .roll-testimonials .owl-item{
      min-height: 470px;
    }

    }@media only screen and (max-width: 900px) {
    .roll-testimonials .owl-item{
      min-height: 530px;
    }

    }

    @media only screen and (max-width: 500px) {
    .roll-testimonials .owl-item{
      min-height: 940px;
    }

They work in each orientation, but when I switch from one to the other they don’t change without me having to hit refresh.

the impact is that when I move from portrait to landscape, the testimonial box height is still set to the portrait parameters, so the box increases and decreases in size based on the amount of text which then shifts the whole web page below. What I want is for it to be a fixed size as per the media query.

Could you please provide me with the appropriate JS or CSS snippet so that when the screen orientation changes, it automatically uses the correct media queries?

Many thanks

Rob

Hello Rob,

In order to do that, please try to apply this jQuery code solution.

Regards,
Kharis