Forum Discussion
Custom column layout breaks on mobile view — SharePoint Online Communication Site
Hi everyone,
I'm working on a SharePoint Online Communication Site and I've built a custom card section manually each element (image, text, badge, link) was added as a separate web part and organized inside a column section.
On desktop it looks exactly as designed. The issue is on *mobile view*: all elements fall apart. The image sits alone at the top, the text below it disconnected, as if the column grouping doesn't exist at all.
I understand SharePoint collapses columns into a single column on mobile, but I'd expect it to at least respect the visual grouping of each block.
What I've already tried:
- "Embed" web part → only accepts iframe, HTML/CSS not supported
- "Script editor / Code snippet" web part → accepts inline CSS but it's not a sustainable solution for non-technical users
My question: Is there any native setting, web part, or no-code alternative that allows custom card layouts to look good on both desktop and mobile without breaking the grouping?
Thanks in advance.
1 Reply
I'm not sure I fully understand what you've created, but have you tried using the new(ish) Flexible Section instead of columns? You can still create the illusion of columns, but in the section settings you can direct it to read the page vertically or horizontally in mobile and email view.
