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!
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.
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?
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”?"
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 I actually fixed it and it’s looking so much better, and I added a few animations, so it’s much smoother
Thank you so much for your time and help!
I am having another problem with the CMS Collections. In most sections on my Collection Template, I have a collection list, and that collection list is turned into a lightbox. Some of the lists have two items, and others have 3 ( I have done an overflow:hidden if more than 3). But, I want to have the 2-item thumbnails have equal margins as those with 3 thumbnails.
When I adjust the percentages of widths of the two-item thumbnails, the margins, padding, all it does is resize the image and I am still left with the same amount of padding (or just not what I am aiming for). I still want them to remain the same size as the 3-item ones, yet have equal margin from the center. Any ideas on how to accomplish this?
Also, on these pages, some sections have 3 items displayed as thumbnails, and others 2, but they vary across the pages. So, for example, I could have 2 thumbnails on Challenges Encountered on one page, and then 3 in the same section on another. So the styling gets applied across all the pages. How can I set the class for ONE section on ONE page so that it is a standalone class, not affecting any other sections on other pages?
@blakelam Thank you for that! I at first had the collection list to display 3, but then upon clicking, the lightbox would only launch those 3 images displayed and not the rest. So I had to set them to overflow:hidden (took me forever to figure out how lol).
Your idea to put 1.5% padding left and right on the rich text elements worked! Woohoo!
And then I used the embed for specific class on just ONE of the pages, and that also worked! Boy, do I wish I learned that loooong ago haha.
Lastly, I went to publish my site and now sections are overlapping? I have my margins top and bottoms set to 380 each b/c I wanted that large clearance between the sections. But not sure why this is happening?
@blakelam I think my browser was messing it up. I use Chrome so not sure why it would do that. I tried all these restores from back up and it was the same thing on each, even from last night; so I knew something wasn’t right with the browser by that point. I tested it on Brave and works fine. Could you test it on your browser? Nada's Portfolio
I just did a quick check using Chrome, and it’s overlapping for me.
Your ‘project-section’ class is still set to height: 100vh on the breakpoint 1440px (which is the largest breakpoint that was added manually), and the top and bottom margin are set to auto at that breakpoint as well. If you remove the height and adjust margin at that breakpoint, it should fix it!
@blakelam
Hi Blake, thank you for that tip. It fixed the issue.
Now, since I restored my backups to where I fixed the sizing and layouts of my thumbnails, it’s no longer justified the way it was working before. They’re just centering from the middle. Could you help?
Hi @blakelam, thanks for that tip. I addressed it in my video here, but the video is really about another issue I am having (fyi, it’s forgot to mention that it’s pertaining to my Corporate Ventures Page under Product Comps Template), if you could take a look. Thank you!
The image layout for the Rich Text field is coming from the corresponding Rich Text field in your CMS Collection. You should be able to set the image to full width in your collection and see the change reflected on the project page. Does that make sense?
I actually fixed it and it’s looking so much better, and I added a few animations, so it’s much smoother 
