- Support Center
- Website
- Building Website
-
Get Started
-
Website
-
Embeddables
-
Courses
-
Bundles
-
Batch
-
Product Settings
-
Product Pricing
-
Mock test
-
Test Series
-
Ebooks
-
Podcasts
-
Webinars
-
Digital Products
-
Free Resource
-
Telegram
-
Learner Management
-
Quiz & Assessment
-
Question Pool
-
Test Evaluation
-
Reports
-
Marketing
-
Forms
-
Workflows
-
CTA
-
Campaign
-
Integrations
-
Roles and Permissions
-
School Settings
-
Sub School
-
Ratings and Reviews
-
Learner Discussion
-
Mobile Apps
-
Zoom integration
-
Newsfeed
-
FAQs
-
Troubleshooting
-
Support
-
Content Security
-
Legacy Website Builder
Show or Hide any Element on the Website Page for a certain Screen Size
Optimize website for different devices by changing element visibility based on screen size.
Adjusting element visibility by screen size is crucial for responsive designs. In this tutorial, we will hide an image element for viewers with a Desktop Screen.
Watch the entire video here, or you can go through each step explained below:
- Click on any element or any container (Box, Row, Column) that you want to hide.
- Navigate to its settings.
- Click on the Responsive Label.
- Screen Type: Select the screen type you want to adjust visibility for, such as desktop, tablet, or smartphone.
- Visibility: Set element visibility for chosen screen type by choosing visible to display or hidden to hide it.
- Click Hidden to hide the selected element or container for the specific device type.
- Preview the changes to ensure they are reflected correctly based on the screen size.
In the video demo, the image remains hidden on larger devices like laptops, ensuring it stays hidden for users with larger screens.