Streaming live at 10am (PST)

Maintaining style changes between a Page and a CMS Collection Page

Hey everyone,

I’m new to the Webflow community and this is my first time posting in the forums, so apologies in advance because this is a total noob question. I’ll try to keep it concise:

I’m working off the Frame IU kit template. I have a Projects page, which has 2 items (Tee Tweets, InThePaintNews) being pulled into it from the CMS.

Currently, my Projects page header image looks the way I’d like it to be. You’ll notice the computer is the focal point across all devices/breaking points. Yay.

However, when I jump into my Projects Template page, Tee Tweets for example, the header image [Photo Fixed Second] is (presumably) inheriting the styling from the Projects page.

I tried resetting the style on this page (Projects Template, item: Tee Tweets), but when I do that, it also changes the Projects page. So I’m not sure how to make it so that the styling is different for each page.

I thought about making a combo class, but this wouldn’t be a good use case for a combo class, right? I actually tried making combo classes for tablet, mobile landscape, mobile portrait, but I ended up making it even worse.

Worst case scenario, I figured I would have to create different images with different dimensions and upload each individual one for each different device/breaking point. But that wouldn’t make sense because that image for each project is being pulled in from the CMS–so it’s all one image.

What am I doing wrong and how can I fix it? Thank you to all in advance.


Here is my site Read-Only:

You could duplicate the class… Hover over the class name, an arrow appears, click it and select ‘duplicate class’. The duplicated class will be named ‘class name copy’ by default. You can change it if you want to but this allows you to start from the setting you had for the original class without changing any of that class’s settings.

Would I have to duplicate the class for each CMS item?
Also, should I duplicate it on each breaking point, just desktop (assuming it cascades down)…?

Appreciate the reply, Sarah.

I’m not sure what you mean here, the class is the same for each CMS item. So you just change it once on the ‘project template’ page and it is changed for each project you add. Does that make sense? Oh, and no need to change the class on tablet/mobile view. This would change the class on desktop as well. Just keep the same class and apply your changes to that class in tablet/mobile views.

That actually answered my first question–I was wondering if I would have to duplicate the class for each Projects Template item. In other words, if I had 5 projects, I would have to duplicate the class 5 times. But you’re saying that the 1 duplicate class applies to all items in the Projects Template.

What I’m thinking now then is that the image that’s being pulled in from the CMS will have to be roughly the same dimensions in order for the images to be framed similarly across breaking points.

In other words, if I want to have Project #1 have a focal point on the left side on the image, all other projects will also be focusing on the left side of the image because the class is the same. Is my thinking correct here?

If so, I think I have to be more mindful in choosing those header images or change the dimensions. Or create new images entirely.

Update: I duplicated the duplicate class hahah.

So now I have ‘Class Name copy’ and ‘Class Name copy copy’… any way to delete one of these entirely?

You’re right in your thing here @hiram. Make sure those images are the same and you’ll save yourself a lot of messing about :slight_smile: . You can always change the name of the classes by clicking, that allows you to edit. Good luck :slight_smile:

Got it–it’s making sense now. I’m aware that you can rename a class, but is there a way to delete it entirely? Did some searching but couldn’t find much info on this, and the only option I see on the Style tab is removing it (but not permanently deleting it).

ah, okay, yeah, once you’ve removed it and it isn’t being using anywhere on your site anymore, you can delete it. It’s called ‘clean up styles’ and can be found in the right-hand panel, see screenshot. Clicking ‘cleap up’ removes any unused styles. As you can see, I need to do this now :slight_smile:

Perfect, that’s exactly what I was looking for. Thanks again for being so helpful, I appreciate it!

1 Like

You’re very welcome!