Setting the height of the testimonial blocks

[Abe]

Hi,

.hp-testimonial.hp-testimonial–view-block {
height:23rem;
}
As you can see on the CSS code pasted here, this sets the height of the testimonial blocks so that all testimonials shall be the same height. This is perfect for the layout on a desktop but doesn’t do good when viewed on a phone. It uses the same height on the mobile, where the blocks are setup with a different layout and it gets messed up.
Is it possible to apply this code only for desktop and not for the mobile?

Thanks for your help.

[andrii]

Hi,

Yes, it’s possible, you need to add a media query to the code, for example:

@media only screen and (min-width: 48em) {
     .hp-testimonial.hp-testimonial–view-block {
        height:23rem;
}
}

Please note that it can require further customization.

[Abe]

This code doesn’t work at all

[andrii]

Hi,

The mistake was in the CSS class, please try this CSS snippet:

@media only screen and (min-width: 48em) {
.hp-testimonial.hp-testimonial--view-block {
        height:23rem;
}
}

[Abe]

Thanks it works!
I’m just wondering what’s the code for mobile only?

[andrii]

Hi,

For mobile only, please try this CSS snippet:

@media only screen and (max-width: 48em) {
.hp-testimonial.hp-testimonial--view-block {
        height:23rem;
}
}