[Resolved] Team Page

Home Forums Support Team Page

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1259062
    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;
    }
    #1259176
    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.

    #1259289
    David
    Staff
    Customer Support

    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.

    #1259302
    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?

    #1259345
    David
    Staff
    Customer Support

    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>
    #1259491
    racheljohn

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

    #1260773
    David
    Staff
    Customer Support

    You’re welcome πŸ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.