Adjust styles for different devices

You can use media queries to apply different styles based on device sizes. For example, you may want to hide the life ring button launcher or the feedback button. The snippet below does both:

@media (max-width: 768px) {
    .productfruits--lifering {
        display: none;
    }
    
    .productfruits--feedback-button {
        display: none;
    }
}

The CSS snippet hides both buttons if the device width is under 768 pixels, which is the breakpoint for most smartphones. It can be adjusted to different sizes.

Was this article helpful?