Lab6 - Part 1

[WSKQ23]

Hello @lecy , Have generated the team members, but they appeared Horizontal instead of vertical. I don’t know what I am missing. Please help

[lecy]

It is because the fa-icon conventions have been updated in RMD docs.

Instead of a span tag we are inserting the icons as svg images using the icons package.

Here is an updated CSS to account for the change:

/* --- Lists of circles --- */

div { display: block } 

.list-circles {
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .list-circles {
    width: 150%;
    margin-left: -25%;
  }
}

.list-circles-item {
  display: inline-block;
  width: 240px;
  vertical-align: top;
  margin: 0;
  padding: 20px;
}

.list-circles-item:hover {
  background: #fafafa;
}

.list-circles-item .item-img {
  max-width: 200px;
  height: 200px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #777;
}

.list-circles-item .item-desc {
  font-size: 16px;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.list-circles-item .item-links {
  margin-top: 10px;
  padding-right: 5px;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.list-circles-item .item-link {
  margin:0 3px;
  color: #314f96;
  text-decoration: none !important;
}

.list-circles-item .item-link:hover {
  color: #042265;
}

.svg-icon {
  display: inline-flex;
  align-self: center;
}

[WSKQ23]

Thanks, Sir, I have used the above CSS, but they still appear horizontal instead of vertical.

[lecy]

You need to provide some more information, then, on what you are doing. It's hard to guess what's wrong without seeing what you have done.

[WSKQ23]

You right,

for( i in 1:3 )
{
   df <- dat[ i , ] 
   build_circle( WEBSITE=df$WEBSITE, 
                 IMG=df$IMG, NAME=df$NAME, 
                 DESC=df$DESC, 
                 GITHUB=df$GITHUB, 
                 TWITTER=df$TWITTER  )
}

After running the above codes, the team members appeared like this.

[lecy]

Did you include the div tags with class list-circles?

There should be one open tag and one close tag around the rest of the HTML code. The CSS style associated with those tags aligns the profiles horizontally.

If you look at the sample code for the loop from instruction it adds the tags above and below the loop section.