To reset the tablet and phone versions of your Webflow site to match the PC (desktop) version and remove any unwanted padding, follow these steps.
1. Understand the Cascade in Webflow
- Webflow uses cascading styles, meaning styles from desktop view cascade down to tablet and mobile unless overridden.
- If components look different on tablet/phone, it's likely because styles were modified specifically for those breakpoints.
2. Check for Inherited vs. Modified Styles
- Switch to Tablet or Mobile View using the device icons at the top of the Designer.
- Select an element that looks off.
- In the Style panel, look for any styles highlighted blue—these are overrides made specifically for the current breakpoint.
- Click the blue arrow next to the style property (e.g., padding) to reset to the inherited desktop value.
3. Remove Unwanted Padding
- Go through the affected elements and:
- Select them individually in tablet/mobile views.
- Inspect padding and margins in the Spacing section of the Style panel.
- Click the blue ‘reset’ icon to remove any padding that doesn’t match the desktop version.
4. Reset Entire Classes If Needed
- If many styles have been overridden and it’s hard to reset individually:
- Duplicate your desktop-styled element while still in Desktop view.
- Paste it into Tablet and Mobile views.
- Delete the older one that had edited styles.
- This provides you with desktop-styled elements for those breakpoints.
5. Check for Container or Section-Level Overrides
- Sometimes padding/margins on parent elements (like Sections, Containers, or Divs) cause alignment issues on smaller breakpoints.
- Review parent elements the same way—look for blue-highlighted properties and reset where necessary.
6. Use the Navigator Panel for Easier Selection
- Use the Navigator (on the left side) to navigate through nested structure and select the exact element or section you need without clicking through the canvas.
Summary
To reset tablet and phone versions in Webflow, look for style overrides (blue-highlighted properties) and reset them manually for each element. Unwanted padding is usually caused by direct or inherited modifications, so check parent elements and clear any overrides by clicking the reset arrow. This ensures styles cascade cleanly from your desktop version.