Feedback on HCI Capstone Project Archive + Homepage Responsiveness

[sayheyakanksha]

Hello everyone!

I wanted to share a digital archive I built to showcase all the capstone projects from students in the HCI master’s program that I'm currently a part of. I customized a few aspects and built upon the existing template, which was already fantastic.

I’d love some feedback on the best ways to make my homepage more responsive. I’m currently facing some spacing issues on smaller screens and wondering whether I should add custom CSS for that or if there are built-in features I can leverage to improve it.

I’ll likely be back with more questions as we prepare to take this website live on our official college server for students to access.

A big thank you to the CollectionBuilder team for making this open-source—this has been an amazing experience!

Check it out here: HCI /depot

[evanwill]

@sayheyakanksha this is looking great! It is really well developed with lots of documentation and explanation.

I think the issues with the home page layout on mobile are due to the inline styles added to the text boxes. Currently it looks like this:

<div class="col-lg-8 text-lg-start" style="padding-right: 10rem;">
        <h2 class="" style="padding-right: 10rem;">Welcome to HCI Capstone Inspiration /depot!</h2>

Rather than using the style attributes to apply padding at all sizes, it would probably work better to create a responsive CSS class to handle it. In Bootstrap you could use a responsive padding class like pe-lg-5, that will apply the padding ONLY once you reach a certain size. However, the largest built in padding option (-5) is only 3rem, so if you want a bigger padding (like your current 10rem), you could set up a custom class in a similar way.
In your project, in the file "_sass/_custom.scss", create a responsive class like this:

@media (min-width: 768px) {
  .pe-md-10 {
    padding-right: 10rem !important;
  }
}

@media (min-width: 992px) {
  .pe-lg-10 {
    padding-right: 10rem !important;
  }
}

Then you can add the class pe-md-10 (medium+ size) or pe-lg-10 (large+ size) to the element you want the padding to be (rather than using the style attribute). So your text boxes would be rewritten like:

<div class="col-lg-8 text-lg-start pe-lg-10" >
        <h2 class="pe-lg-10">Welcome to HCI Capstone Inspiration /depot!</h2>

[sayheyakanksha]

Thank you for your kind words! It was honestly a lot of fun to work on this project and the documentation for CollectionBuilder was really helpful!

Thank you for your answer as well. It makes sense! I have worked with bootstrap before so I think I should be able to manage it.

I also wanted to know that I have a few questions regarding the server setup for this website. Instead of hosting it on github pages, we'll be hosting it on a separate server and I also have questions regarding the object hosting as well. Should I make a new thread for that separately?

[evanwill]

Oh, one more thing--> when the rows reflow (when the columns stack on top of each other) for mobile size, you will want padding on the bottom of each column so that there is space between them when stacked. So on your text box cols you might also want to add pb-3 to provide that space (like: <div class="col-lg-8 text-lg-start pe-lg-10 pb-3" >). It won't change how it looks on desktop, but will ensure there is space between the text box and the visualizations.

[evanwill]

@sayheyakanksha for the server deployment question, that is always pretty dependent on the local IT context. The basics are covered in the docs, https://collectionbuilder.github.io/cb-docs/docs/deploy/build/
but if you have specific questions for those details, probably best to just email us directly since those are usually very specific:
https://collectionbuilder.github.io/cb-docs/#how-to-get-in-touch

[sayheyakanksha]

Understood! Thank you for sharing the details. I will reach out separately. You have a lovely day! 😇