Starterkit: number of columns in member section


#1

Hi there.

I a newbie, and I am trying to only have 2 or 3 members on my team to show up. When I delete members, the team-section does not change in size, nor does it center the two columns.

I have been looking at css, blueprints, template files and so forth, but I cannot seem the place where it renders the grid/template for the membersection on the about page, so that I could change the numbers of columns.

Have at look here: http://forandreforandre.dk/about

Hop you can help me,

Kim


#2

It on line 838 of the stylesheet…

@media all and (min-width: 62.5em) {
  .team-item {
    width: 25%;
  }
}

But from what you are saying, you want the number of team members to fill the available space horizontally. For that you would need to switch the css to use something like Flexbox or CSS Grid. This will adapt automatically according to the number of team members. currently its fixed so that each one occupies 25%.


#3

FYI; The team members are rendered in /site/templates/about.php


#4

Thanks, both of you - right now I think I messed something up, så I’ll just try again - it’s a bit of trial and error :slight_smile:


#5

@kimlinnet If you are completely new to web development in general (i.e. not only to Kirby), then I’d recommend a few HTML/CSS tutorials and getting familiar with dev tools first to get you up to speed. Let us know if you need any recommendations.


#6

Well. Since I even can’t figure how to make the columns center, or left-align the headline (Our Purring Team) via changes to h2 or making a .class, it probably calls for at point to at nice CSS tutorial / school. I think I’m missing the basic hierachy of how things nests and renders in CSS / Kirby…

I have been doing wordpress for years (www.ollemus.dk) - but I really love the simplicity and speed of Kirby. So. I wont give up just yet :slight_smile:

Thx for your answers so far,

Kim.


#7

Based on the current version you have online…add the following to the existing CSS rules…

// This is a new rule
.team-list {
text-align: center;
}
// add this to this existing rule
.team-item {
width: 100%;
max-width: 250px; // adjust width to preference
}

Will give you this:


#8

@kimlinnet Welcome to our community.

As regards basic HTML/CSS stuff, there are lots of tutorial/courses out there, e.g.

Then if you are not familiar with the dev tools, you might also want to check out a special tutorial for the browser you use, you can easily find something if you google, e.g. for Firefox https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

This will give you a solid foundation to work with Kirby, because without those basics, it’s a bit difficult, and while we are more then happy to help with anything Kirby, we don’t really have the resources to do support for HTML/CSS basics.