roundtableAI / roundtable-js

Open-source research-grade programmatic survey software
https://surveys.roundtable.ai
Apache License 2.0
244 stars 4 forks source link

Styles overriding can be confusing #26

Closed mdahardy closed 3 weeks ago

mdahardy commented 1 month ago

If you set the background of the body in the survey to blue, this will work for desktop and tablet screens, but not mobile. This is because the body background is set separately for desktops and mobile in the default styles object for the body. So unless you override both styles, there may be unexpected behavior. Maybe it would be better to override styles for all screens when a custom style is set?

s-babaeizadeh commented 1 month ago

To ensure a consistent background style across all devices, consider the following approaches:

Override Styles for All Screens: Create a custom style that applies to all screen sizes using CSS media queries or by directly setting styles in your survey's configuration. Use Responsive Design Techniques: Utilize flexible units and media queries to adjust styles based on the device. Leverage a CSS Framework: If using a CSS framework, like Tailwind CSS or Material UI take advantage of its built-in responsive utilities to manage styles across different devices.

zeul22 commented 1 month ago

Interested, I will look into this.