Power Platform Community Forum Thread Details

My website is not show properly on the mobile preview power pages

I built my website from scratch. Upon completion, my website is not showing properly on a mobile preview on portrait. I'm not really sure how to fix. I just want my website to look proper on a phone. Could someone barney-style the steps for me? I would really appreciate it.

Categories:

Design & build

Hi JA-22122046-0,

Thanks for raising it in the Q&A forum.
Power Pages is responsive by default (Bootstrap-based), so when the mobile portrait preview looks “wrong” it’s usually because the page is built with fixed widths/heights, non-responsive sections, or custom CSS/HTML that doesn’t follow Bootstrap breakpoints.

Step-by-step (Barney-style)
- Open your page in Design Studio
- Go to Power Pages → open the site → Edit (Design Studio) → open the page that breaks on mobile.
Switch to Mobile (portrait) preview
- In the preview/device selector, choose Mobile and ensure Portrait is selected (or narrow the preview width until it matches phone width).
- This helps you see exactly which section is overflowing or shrinking incorrectly.
Find what is “overflowing”
- Click each section/container one-by-one and look for:
- Fixed pixel widths (example: 900px / 1200px)
- Fixed heights that clip content
- Images that are larger than their container
- In responsive pages, widths should generally be auto / 100% or controlled by Bootstrap columns.
Use Bootstrap grid correctly (most important)
- If you used custom HTML, make sure it follows Bootstrap grid patterns (for Bootstrap 3 sites):
- Put content in a .container (or .container-fluid)
- Use .row
- Use columns like .col-xs-12, .col-sm-6, etc.
- This is how Power Pages expects layouts to behave across screen sizes.
Fix images (very common issue)
- Ensure images scale down on mobile:
- If using Bootstrap 3 patterns, add img-responsive (or use CSS max-width:100%; height:auto;).
- Oversized images often cause horizontal scrolling or “broken” sections.
Check your custom CSS (if any)
- Go to Styling → Manage CSS and confirm you didn’t replace Bootstrap or introduce global rules like width: 1200px on common classes.
- Microsoft specifically cautions not to replace Bootstrap 3 on Power Pages sites because other scenarios depend on it.
Add mobile-only tweaks (when needed)
- If one section just needs a small fix, add a media query in your custom CSS, for example:
- At small widths, set containers to width: 100%, reduce padding, stack columns, etc.
- This is the standard approach when a design needs a mobile-specific adjustment.

Most existing Power Pages sites run on Bootstrap 3, while Bootstrap 5 is available for new sites created with the enhanced data model. So use the correct classes for your site’s Bootstrap version (Bootstrap 3 vs 5), otherwise layouts won’t respond as expected.

Which part is “not showing properly” in portrait—horizontal scrolling, overlapping text, huge images, or sections cut off? If you share a screenshot of the mobile preview and tell which template you used (Blank/Starter/any theme), the exact fix can be pinpointed.If it's helpful, please accept the answer.

Happy Holidays :)

Best regards,
Jerald Felix

Quick Links

Subscribe to this forum!