/* Center headings and center each team-member block, but keep the long bio text left-aligned Place this file at: /assets/css/services-center.css and include it in your : Or merge these rules into your main stylesheet. */ /* Scope to .services so other sections are unaffected */ .services { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings remain centered */ .services h1, .services h2, .services h3 { text-align: center; margin-left: auto; margin-right: auto; } /* General intro paragraphs (centered) */ .services > div.intro, .services p.intro { text-align: center; max-width: 58rem; margin: 0.6rem auto 1rem; } /* TEAM member block: keep the block centered on the page */ .services .team-member { max-width: 60rem; /* controls line length of bio block */ margin: 0.75rem auto; /* centers the block */ padding: 0.6rem 0.8rem; box-sizing: border-box; text-align: center; /* center inline items like name/image by default */ } /* Ensure image and title inside team-member are centered */ .services .team-member img { display: block; margin: 0 auto 10px; max-width: 220px; height: auto; border-radius: 6px; } .services .team-member .name { display: block; font-weight: 700; margin-bottom: 4px; text-align: center; } .services .team-member .role { display: block; font-weight: 600; color: #0a72c8; margin-bottom: 10px; text-align: center; } /* IMPORTANT: bio text inside the centered team-member block should be left-aligned for readability. Wrap the long biography content in an element with class .bio as shown in the HTML example below. */ .services .team-member .bio { text-align: left; /* left-align the paragraphs */ margin: 0 auto; /* keep bio centered as a block */ max-width: 48rem; /* control line-length for readability */ line-height: 1.65; color: #123; font-size: 1rem; } /* When the bio contains multiple paragraphs */ .services .team-member .bio p { margin-bottom: 0.9rem; } /* Responsive adjustments */ @media (max-width: 900px) { .services .team-member { max-width: 44rem; padding: 0.5rem; } .services .team-member img { max-width: 180px; } .services .team-member .bio { max-width: 36rem; } } @media (max-width: 480px) { .services .team-member { max-width: 92%; padding: 0.4rem; } .services .team-member img { max-width: 140px; } .services .team-member .bio { max-width: 100%; } }