Studio Editor: Scanning Pages for Responsive Design Issues
Creating responsive designs for your clients is essential in a multi-device world. The Responsive Checker in Wix Studio simplifies this process, helping you to quickly identify and manage issues across all breakpoints.
You can choose to fix, view or dismiss issues, giving you the flexibility to refine the design to your vision.
Scanning a page for responsive issues
Scan every site page to fix responsive issues and ensure it looks good on all screen sizes. The page is reviewed on all breakpoints. You then decide if the issues we identified are relevant to your design or if they should be ignored.
To scan a page:
Go to your editor and open the relevant site page.
Click Site Checker
on the left side of your editor.
Select Fix Responsive Issues.
Click Scan Page.
Review the issues found on this page.
Choose what to do with every issue:
See the issue on the page: Click View to see how the issue looks before deciding whether or not to apply our fix.
Fix the issue: Click the button next to View (the text on the button depends on the issue). This automatically applies our recommendation.
Dismiss the issue: Click the Dismiss icon
on the issue to ignore it. The issue won't come up again if you ever rescan this page.
(Optional) Scan another page:
Click the page dropdown at the top of the editor.
Tip: Make sure to keep the Responsive Checker panel open.
Click Scan next to the relevant page.
Tip:
Some issues are only related to specific breakpoints. In that case, you can see an icon at the bottom left of the issue, representing the affected breakpoint.
Restoring dismissed issues
When dismissing an issue, the Responsive Checker ignores it completely, even if you rescan the page. However, the dismissed issues are always available for you to review and decide if you want to apply our fix.
To restore a dismissed issue:
Go to your editor and open the relevant site page.
Click Site Checker
on the left side of your editor.
Select Fix responsive issues.
Click the Filter icon
at the top.
Select Dismissed issues.
(Optional) Click View next to the relevant issue to see it on the page.
Click Restore.
(Optional) Fix the restored issue:
Click the Filter icon
at the top.
Select Open issues.
Locate the restored issue and click Fix.
FAQs
Click a question below to learn more.
Do I have to apply the checker's recommendations?
No. While these recommendations can help you prevent accidental gaps, overlaps and content overflow, you can always dismiss issues that are not relevant to your design. For example, some designs showcase overlapping elements intentionally.
You may also want to dismiss an issue if you plan to resolve it in a different method than the one we suggested.
Dismissed issues won't come up again if you re-scan the page, but you can always access them by clicking the Filter icon
at the top.
Can I scan a page more than once?
Absolutely. You can always click Scan Page Again at the bottom of the Responsive Checker panel.
Tip: You can see when a page was last scanned right below the Scan Page Again button. This info is also available in the page dropdown at the top of the panel.
Is there a quick way to check other site pages?
Click the page dropdown at the top of the panel and select the page you want to scan next. If you haven't scanned the page before, it will automatically be scanned on all breakpoints.
If the page has already been scanned, you'll see the pending issues that weren't resolved yet.
Any tips on how to prevent these issues from coming up in future designs?
Here are some important guidelines to keep in mind when creating a responsive design.
Sizing issues
Sizing issues like elements overlaps, content overflows or unintentional gaps happen when different size-related settings create unplanned behaviors on your client's site.
When changing an element’s responsive behavior or sizing units, keep the other elements around it in mind before moving on—especially the parent and child elements. Mixing responsive behaviors or using mismatched sizing units are the most common reasons for sizing issues.
Positioning issues
Positioning issues can arise when incompatible position-related settings create unplanned behaviors. For example, mixing size units when applying margins (e.g. using px* for one side and px for another) could cause an issue.
In addition, pay attention to the docking as the element might be docked unintentionally – is the element docked to the nearest edges of its parent element? If not, adjust the docking points. Alternatively, you can align the element to the center and remove the docking.
Learn more
Learn more about responsive design:
The Wix Studio Academy offers tons of resources to help you design responsive sites fast. Take a look at these to learn about responsiveness in the editor: