How to change the size of a single project image and title without affecting other images in Webflow?
TL;DR
- Select the specific image or title you want to resize in Webflow.
- Assign a unique or combo class to it, then adjust size and styling in the Style panel to affect only that element.
To change the size of a single project image and title without affecting other elements in Webflow, you need to apply unique styling specifically to that item. Here’s how to do it:
1. Select the Specific Project Element
- Click on the image or title you want to resize.
- Make sure it's the exact item you want to style differently (not a class that’s applied to multiple items).
2. Assign a Unique Class or Combo Class
If it shares a class with other images/titles, add a Combo Class:
Click the class name in the Selector field (top right).
Type a new name after the existing class (e.g.,
project-image special).This creates a variation that affects only this one element.
Alternatively, create a new unique class if it's not part of a repeated component.
3. Adjust Size in the Style Panel
- With the unique or combo class selected:
- Change the width, max-width, or font size to your desired value.
- You can also adjust padding, margin, or other styling settings to suit your layout.
4. Check Responsiveness
- Toggle through Webflow’s responsive views (tablet, mobile landscape, mobile portrait).
- Make sure your unique styling looks good across breakpoints or adjust as needed using the same class.
Summary
To resize a single project image and title without affecting others in Webflow, use a unique or combo class on the specific element and apply the size changes via the Style panel. This ensures styling is isolated to that item only.