EngagementHQ uses responsive web design to automatically adjust for the best user experience based on the screen size and resolution of the user's device. Responsive design is standard practice for accessible websites.
To test your site's appearance on different devices, you can resize your browser window to the desired dimensions. This will give you a reasonable approximation of how the page will look on other devices. The responsive design is seamless, but there are a few subtle differences that you should be aware of.
Projects on mobile devices
The content of your projects will be ordered in the responsive view as follows:
Header and Navigation Menu: your navigation menu will automatically display as a hamburger menu.
Project Banner: like other images, the banner will shrink to display the maximum width.
Project Description: the content area with the project image and text within will shrink to accommodate smaller screens, removing any horizontal scroll.
Tools: your tools tabs will display in a cascade.
Widgets: your widgets will appear in the same order below your tools.
Footer Links: your links will remain the same but will display in columns below your social links and above your logo.
Your homepage on mobile devices
When previewing your homepage, you can switch between devices. Your homepage will still show all sections, but cards will be stacked instead of your chosen layout. As such:
All section types shrink to fit the device size, resulting in stacked elements
Banners are cropped to show the focal point with any welcome message you set
Project card images are cropped around the focal point and will display at the full width with variable heights
Sliders are cropped to show the focal point. The Title, Description, and Button will display over the image or below it, depending on the layout.