Streaming live at 10am (PST)

Class styles applying across all pages in a CMS Collection Template

I have a collection template called Project Comps Template, but each of the pages have varying lengths and number of assets within a section. The problem I am having is that if I change a style to a class in one section on one of the pages, it applies to the rest of the pages, and so it really messes up my layout.

My goal is to have each section take up 100vh, but if the section is longer (such as with images and sub-sections), I still want “just enough clearance” from margin top and bottom to still give that distinct separation between the sections when scrolling, still giving the “illusion” that it is taking up 100vh (I do not want too much spacing). When I do this, I create combo classes and adjust the height, but then it applies to another page in the collection that has much shorter length and sometimes no assets (images/lightbox). Is there a solution to this?

I believed CMS would really help me become more efficient and build my website faster, but it has only been giving me more frustration and taking me much longer to build this. I almost want to just forego the template altogether, but that shouldn’t even be a thought!

Here is my read-only link.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

A bit beyond me at the moment as im also working on layouts and animation. cms styling is on the list.
not sure if this helps but would 100vh max help/
Also for overflow auto may be handy.

Hi @chickenlegs0809, I think @iDATUS is right. You’ll want to set your ‘Project Section’ class to Min Height 100vh and get rid of the manually set heights on each section. You shouldn’t need the combo classes unless you want to apply unique styles to specific sections.

By using min-height, you’re telling each Project Section to be at least as tall as the entire viewport but allowing sections with more content to extend beyond that minimum height as needed. There’s no need to set specific heights for each section – the default height is ‘Auto’ which matches the height of the content in the section.

I hope that’s helpful. Let me know if anything is still unclear, and I’d be glad to help out.

Thank you @blakelam and @iDATUS for your responses.

Just curious, did you try that on my link? I believe that’s what I initially had, but it wasn’t pushing through content, nor was it giving enough margin top and bottom clearance to give that separate large section/separate viewport feel (I hope I’m making sense) . In any case, I’ll give that [another] try and see what happens.

I’ll let you know if it worked. Hopefully!
Thanks, again!

UPDATE: I tried that again and it IS what I initially had before and why I started creating combo classes. What else am I missing?

Here’s a screencast walking through what I’m talking about: https://www.loom.com/share/8709b2695a41428fb5d5c02031c9d2d7

Let me know if things are still unclear!

Thank you so much for that!! I left you a comment on the video!

" Nada Dabbouseh

0:02

That was really helpful, Blake! It accomplished most of what I wanted. Just some sections have shorter margin top and bottoms to their neighboring ones now. I like the look and feel of the top two sections (“Responsibilities” and “Project Objectives”), especially. It gives a minimal, clean look within the viewport. That’s the final effect I am going for for each of the sections.

I thought about using a slider. Unless there is a way to set margins to give that illusion for each of the sections like the ones for “Responsibilities” and “Project Objectives”?"

I’m glad that helped!

Unless you switch up the layout of the sections with more content, you’ll have to choose between consistent space between sections and having the sections with less content be set to a height of 100vh.

The content is centered in the sections using Flexbox, so the space between the sections is going to vary based on how much content is in each section – the first two sections have significantly less content that leaves more space on top and bottom when it’s centered in the.

Personally, I think getting rid of the min-height of 100vh and setting a big top and bottom margin on the Page Sections will give a clean, consistent look – especially given the varying content length in each section.

You read my mind! I had the same thought :slight_smile: I actually fixed it and it’s looking so much better, and I added a few animations, so it’s much smoother :slight_smile:
Thank you so much for your time and help!

1 Like