[Resolved] Team Page

[racheljohn]

I am having trouble getting my team member page to be responsive and getting it to show the different team members in a 3 grid when a device is larger and single when it is smaller. I have tried a bunch of diffreent stuff to get it working and I have the desktop styled nicely but as soon as it goes to mobile I lose all of that and the picture is out way to big in mobile. I really could use some advice/help figuring out how to make this work. thanks in Advance.

This is the HTML I am using:

<div class="wrapper">
	  <h1>Our Team </h1>
  <div class="team">
    <div class="team_member">
      <div class="team_img">
		        <img src="Pic" />
      </div>
      <h3>Team Member Name</h3>
      <p class="role">Position in Company</p>
      <p> Team Member Info </p>
		</div>
		</div>

And this is the css:

@import url('https://fonts.googleapis.com/css?family=Allura|Josefin+Sans');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body{
  background: #81c644;
  font-family: 'Josefin Sans', sans-serif;
}

.wrapper{
  margin-top: 10%;
}

.wrapper h1{
  font-family: 'Allura', cursive;
  font-size: 52px;
  margin-bottom: 60px;
  text-align: center;
}

.team{
  display: flex;
  justify-content: center;
  width: auto;
  text-align: center;
  flex-wrap: wrap;
}

.team .team_member{
  background: #fff;
  margin: 5px;
  margin-bottom: 50px;
  width: 300px;
  padding: 20px;
  line-height: 20px;
  color: #8e8b8b;
  position: relative;
}

.team .team_member h3{
  color: #81c644;
  font-size: 26px;
  margin-top: 50px;
}

.team .team_member p.role{
  color: #ccc;
  margin: 12px 0;
  font-size: 12px;
  text-transform: uppercase;
}

.team .team_member .team_img{
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
}

.team .team_member .team_img img{
  width: 100px;
  height: 100px;
  padding: 5px;
}

[racheljohn]

If there is a easier way to do something like this I am open to options including a plugin option. I just am unsure about adding more plugins if I don’t actually need it. And am trying to find a simple lightweight solution.

[David]

Hi there,

looking at the CSS you have in your site – above your Team CSS you have this:

@media (min-width: 1024px) {
    .site-footer .footer-widgets-container .inner-padding {
        padding: 0;
    }

    .site-footer .footer-widgets-container .inside-footer-widgets {
        margin-left: 0;
        display: flex;
        justify-content: center;
    }

You need to add another closing } to this piece of code – or all of your team CSS is being included in the 1024px media query.

[racheljohn]

I feel so silly that I didn’t see that. Okay Did that and mobile is now working correctly but still having a issue getting it to display more than 1 next to each other on desktop?

[David]

You only need the one <div class="team"> container – so your markup needs to look something like this:

<div class="wrapper">
    <h1>Our Team </h1>
    <div class="team">
        <div class="team_member">
            <div class="team_img">
                <img />
            </div>
            <h3>H3 title</h3>
            <p class="role">Role</p>
            <p> Description</p>
        </div>
        <div class="team_member">
            <div class="team_img">
                <img />
            </div>
            <h3>H3 title</h3>
            <p class="role">Role</p>
            <p> Description</p>
        </div>
        <div class="team_member">
            <div class="team_img">
                <img />
            </div>
            <h3>H3 title</h3>
            <p class="role">Role</p>
            <p> Description</p>
        </div>
    </div>
</div>

[racheljohn]

You Guys Rock! This works Perfectly Thank you so much.

[David]

You’re welcome 🙂

[Author]

Posts