Question:
How can I ensure my website displays correctly on tablet devices without elements being cut off due to grid line limitations?
Product:
Wix Editor
What are you trying to achieve:
I’m developing a website where many elements extend beyond the grid lines. When viewed on tablet PCs, numerous elements are not displaying correctly due to cut-off issues. To address this, I’ve considered the following solutions in order of preference:
- Ideally, I’d like to reduce the overall page size so that horizontal images are fully visible. This is my preferred solution.
- If that’s not feasible, my next choice would be to add a horizontal scroll to preserve horizontal images entirely.
- As a last resort, if both options above prove challenging, I’d consider switching to the mobile version of the site when accessed from tablet devices.
My primary goal is to maintain the design integrity while ensuring all content is visible without cut-offs on tablet screens. I’m hoping to implement the first option, but I’m open to the alternatives if necessary.
What have you already tried:
I’ve attempted to constrain the design within the grid lines, but this results in too much empty space and an unappealing layout. I’ve also explored using developer tools to implement these solutions, but I’m unsure of the correct approach as I lack knowledge in the Wix Developer mode
Additional information:
The current layout works well on desktop but becomes problematic on tablets. I’m open to CSS solutions or Wix-specific features that could address this issue. I’m particularly interested in methods that can detect tablet devices and adjust the layout accordingly, either by scaling the content, adding a horizontal scroll, or switching to a mobile view as a last resort.