How to change the size of a single project image and title without affecting other images in Webflow?
TL;DR
- Navigate to the desired image and title in Webflow, select each, and create unique class names for them.
- Use the Style panel to adjust the dimensions and font size while preserving proportions, and test changes in Preview mode to ensure they only affect the selected elements.
To change the size of a single project image and title without affecting others in Webflow, you need to use a combination of custom classes and styles.
1. Identify the Specific Image and Title
- Open your Webflow project and navigate to the page or section where the project image and title you want to change are located.
- Select the specific image and title that you want to modify.
2. Create Unique Classes
- Select the image you want to resize. In the Selector field of the Styles panel, create a unique class name for this image (e.g.,
.custom-image-size). - Do the same for the title by selecting it and creating a new class name (e.g.,
.custom-title-size).
3. Adjust Image and Title Sizes
- With the custom class selected, adjust the image dimensions using the Style panel’s sizing options:
- Width and Height: Enter specific values to change the size.
- Max/Min Width, Auto Scale: Use these if proportions should be preserved.
- Adjust the title’s size by changing font-size properties under Typography in the Styles panel.
4. Apply Styles Carefully
- Test the changes in Webflow’s Preview mode to ensure only the desired image and title are affected.
- Make further adjustments if any other styles or elements are unintentionally altered.
Summary
To resize a single project image and title in Webflow, assign them unique custom classes and modify their dimensions via the Style panel. This approach ensures that other images and titles remain unaffected by the changes.
