Book your next appointment Website Mockup

Review the Split Image and Calendar Before Narrow Screens Stack Them

The block depends on the visual balance between a tall pottery-making image and a denser scheduling column, so that relationship deserves close review in a website mockup. On wider screens, the two-column arrangement gives the image a strong left-side presence while the date picker and time-slot controls remain grouped on the right. The heading “Select a day and time” should continue to lead the interface, with the timezone label and available slots easy to associate with the chosen date.

At narrower widths, the main question is how the image and scheduler adapt without losing their separate roles. The columns may need to stack, and the tall image may become visually dominant if its height is not balanced against the calendar panel. The time-slot buttons also require review for wrapping, spacing, and tap-friendly clarity. No-availability, successful-booking, conflict, and error messages should remain readable when they appear beneath or around the controls.

The white outer background and light-gray panel provide useful separation during this evaluation, but color alone cannot resolve a crowded layout. Check the heading, calendar width, timezone text, slot alignment, and image scale together at each screen size. The mockup should show one coherent appointment section whose visual hierarchy survives the transition from side-by-side presentation to a narrower vertical arrangement.