I’m building a page and the created a FAQ section, it’s nor responsive on mobile, I have checked the size of all the elements and everything is set to auto. Any idea what’s the issue here?
Here’s the link - Webflow - Early Autism Services
Hi there!
When designing responsive layouts, fixed pixel widths can cause display issues on mobile devices. Elements with fixed widths (like 500px) won’t adapt to smaller viewport sizes, potentially causing overflow or requiring horizontal scrolling. Instead, consider using:
- Relative units like percentages, VW (viewport width), or rem
- Flexbox or Grid layouts with flexible containers
- Max-width instead of fixed width for containers
- Media queries to adjust layouts at different breakpoints
For existing fixed-width elements, you can convert them to relative units by using percentage-based widths or dynamic calculations. For example, change width: 500px to width: 100% or max-width: 500px to ensure content stays within the viewport.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hey @pjain,
In the relevant smaller breakpoints, you could set the display property of ‘Div Block 96’ to flex and set the ‘u-text-h3’ element’s ‘Breaking → Line’ property under Typography in the Style section (i.e. the right sidebar) to be ‘Normal’ specifically. This should achieve the result you are aiming for in smaller devices for the FAQ accordion. Hope this helps.
1 Like
This was helpful, thank you.
1 Like