Sometimes, you may want certain Reviewsion blocks to appear only on specific device types—such as desktop or mobile. Shopify’s built-in Custom CSS field for each section makes it easy to accomplish this using standard media queries.
Hiding Blocks on Mobile Devices
To hide a Reviewsion block specifically on mobile devices, you can use the following CSS snippet in your section’s Custom CSS field:
@media (max-width: 768px) {
.rvsn-theme-block__your-block-name {
display: none !important;
}
}
Replace .rvsn-theme-block__your-block-name with the specific block class you want to hide (for example, .rvsn-theme-block__reviews-carousel).
Hiding Blocks on Desktop Devices
To hide a Reviewsion block specifically on larger screens (e.g., desktop), use the following CSS snippet:
@media (min-width: 769px) {
.rvsn-theme-block__your-block-name {
display: none !important;
}
}
Adjusting Breakpoints
The exact breakpoint values in the above media queries may need adjustment depending on your specific theme or design requirements. Standard Shopify themes typically use around 768px as a common breakpoint between mobile and desktop. If this doesn’t fit your needs, simply adjust the pixel value accordingly.
Applying Custom CSS
To apply this CSS:
In your Shopify Admin, navigate to Online Store > Themes.
Click Customize on your active theme.
Select the section containing your Reviewsion block.
Open the Custom CSS panel.
Paste your CSS snippet and click Save.
Need More Help?
If you need further assistance hiding blocks on mobile or desktop, contact our support team or use the chat widget in your Reviewsion dashboard.