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 element you want to change.
- Assign a unique or combo class and adjust size styles like width, font size, or padding, ensuring no other elements use the same class.
To change the size of a single project image and title in Webflow without affecting others, you need to use unique classes or combo classes. Here's how to do it:
1. Select the Specific Project Element
- Click the image or title you want to modify on the canvas.
- Make sure only that one is selected—not all instances using the same class.
2. Create a Unique Class or Combo Class
- In the Selector field in the right panel, either:
- Create a new class name (if it's completely unique content), or
- Add a combo class (e.g.,
project-title special) to build on the base style.
3. Adjust the Size Styles
- With the unique or combo class selected:
- For the image, modify styles like width, height, max-height, or object-fit under the Style panel.
- For the title, adjust font size, line height, letter spacing, or margin/padding.
4. Double-Check Other Elements
- Click other similar project images or titles to confirm they don't share your new class.
- This ensures no unintended style changes happen elsewhere.
5. Use Custom Attributes if Needed
- If styling conditionally (e.g., dynamic content from CMS), you can use custom fields and reference them with custom CSS in an Embed (requires a bit more advanced setup).
Summary
To resize a single project image or title in Webflow without impacting others, assign it a unique class or combo class and apply your style changes specifically to that element. This prevents global class changes across your site.