The Mobile Optimization section in Mirror App is designed to adapt your widget’s appearance across different devices — from desktop computers to smartphones.
These settings ensure that your feed always looks clean, loads quickly, and maintains correct image proportions regardless of screen size
Mobile Optimization
Go to
Design Tab
Select
Columns & Rows
section
Scroll down to
Mobile Optimization
block
Click
Configure
button
How to Open the Settings
A menu with device categories will open:
• Desktop — 640–1200 px
• Laptop — 640–960 px
• Tablet — 320–640 px
• Mobile — up to 320 px
By default, Mirror App has already set an optimal number of columns for each screen size. These default values provide a balance between content density, loading speed, and visual readability.
However, you can always adjust these settings to match your own vision and the unique design of your website.
Default Settings
How the Settings Work
Columns — number of columns (1–10)
Example:
5 columns on desktop, 3 on tablet, 1 on mobile
Rows — number of rows (1–5)
Example:
2 rows are optimal for a compact layout
Space Between Post, px — distance between posts (0–50 px)
Recommended:
10–20 px for a tight grid, 30–40 px for a more airy design
Columns Mode
Default toggle
enables automatic system values.
To take full manual control of responsiveness, turn it off and set your own parameters.
Breakpoint
If you set parameters for a screen size larger than your current screen, the changes will not be visible in the preview, but they will be saved and applied after publication.
Example:
If you’re editing your widget in Tablet mode (640–960 px) but change settings for Desktop (1200+), for instance setting 5 columns, they will be saved but won’t appear in the preview panel.
This is expected behavior and does not affect the final appearance of your widget on the live site.
Important: Preview Behavior
✨ Design Tips
✅ Don’t overload the mobile version — 1–2 columns are enough
✅ Always preview your widget on real devices before publishing
✅ Maintain visual consistency — use the same padding and color scheme
✅ Use Breakpoints if your website is built with adaptive CSS grids
• Automatically adjusts post width and height to fit the screen
• Preserves image proportions
• Optimizes performance by hiding unnecessary elements on smaller screens
What Mirror App Does Automatically
• When you need a specific column layout for tablets or mobile devices
• If your website uses custom breakpoints (e.g., 1024 px)
• When you want to preserve exact proportions while embedding via iframe
When to Use Manual Settings
Conclusion 🎯
The Mobile Optimization feature is key to ensuring your Mirror App feed looks professional and consistent on any device
We’ve already provided optimal default settings for all screen sizes, but you can fine-tune everything to match your brand’s style
The main thing is to test the result on different devices — your social feed will always look perfect everywhere
Was This Article Helpful?
Do you still have questions? Contact us
Products
