Centering social media icons underneath Avatar component

Question

I'm trying to align my social media icons underneath the Avatar component. I have tried centering it with all the ways I know how as you can see in the JSS. I've also tried it without targeting the social media icons with JSS, for the rest of the content is supposed to be centered. If I don't target it though, it stacks the icons on top of each other like a column. Any advice would be appreciated.

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Spinner from "../layout/Spinner";
import Navbar from "../dashboard/Navbar";
import TwitterIcon from '@material-ui/icons/Twitter';
import FacebookIcon from '@material-ui/icons/Facebook';
import YouTubeIcon from '@material-ui/icons/YouTube';
import InstagramIcon from '@material-ui/icons/Instagram';
import {
  Container,
  CssBaseline,
  makeStyles,
  Card,
  Avatar,
  CardContent,
  Typography
} from "@material-ui/core";
import { getProfileById } from "../../actions/profile";

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  card: {
    // marginTop: 20,
    height: "100%",
    width: '100%',
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    paddingLeft: "25vw",
    paddingRight: "25vw",
    paddingBottom: "6.5vh"
  },
  cardContent: {
    flexGrow: 1
  },
  avatar: {
    width: theme.spacing(25),
    height: theme.spacing(25),
    marginTop: "3vh"
  }, 
  editButton: {
    marginTop: "1.5vh"
  }, 
  motto: {
    marginTop: 10,
    textAlign: 'center'
  }, 
  firstName: {
    textAlign: 'center'
  }, 
  goalsCompleted: {
    textAlign: 'center'
  }, 
  location: {
    textAlign: 'center'
  },
  socialMedias: {
    display: 'flex', 
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center'
  }
}));

const Profile = ({
  match,
  getProfileById,
  profile: { profile, loading }
}) => {
  const classes = useStyles();

  useEffect(() => {
    getProfileById(match.params.id);

  }, [getProfileById, match.params.id]);

  return (
    <>
      {profile === null || loading ? (
        <>
          <Navbar />
          <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
              <Spinner />
            </div>
          </Container>
        </>
      ) : (

        // The loaded profile will go here

        <>
          <Navbar />
          <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>

              <Card className={classes.card}>
                <Avatar
                  alt="Profile Image"
                  src={profile.user.avatar}
                  className={classes.avatar}
                />
                <Container className={classes.socialMedias}>
                <TwitterIcon/>
                    <FacebookIcon/>
                    <YouTubeIcon/>
                    <InstagramIcon/>
                  </Container>
                <CardContent className={classes.cardContent}>
                <Typography className={classes.firstName} noWrap gutterBottom variant="h3" component="h2">
                    {profile.user.first_name}'s Profile
                  </Typography>

                  <Typography className={classes.goalsCompleted} noWrap gutterBottom variant="h4" component="h2">
                    Goals completed {profile.goalsCompleted}
                  </Typography>
                  <Typography className={classes.location} noWrap gutterBottom variant="h6" component="h2">
                    {profile.location}
                  </Typography>
                  <Typography className={classes.motto}>{profile.aboutme}</Typography>


                </CardContent>
              </Card>
            </div>

          </Container>

        </>
      )}
    </>
  );
};

Profile.propTypes = {
  getProfileById: PropTypes.func,
  profile: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile,
  auth: state.auth
});

export default connect(mapStateToProps, { getProfileById })(Profile);

I would try to remove all the flex "properties" from the `socialMedias` class: ```socialMedias: { display: 'flex', width: '100%' }``` — mallocthePD, Jan 12 '20 at 10:24

score 0 · Accepted Answer · answered Jan 12 '20 at 12:57

The solution was to have the JSS as such

socialMedias: {
   display: 'flex'
  }

and to instead wrap the icons in a div like so:

<div className={classes.socialMedias}>
    <TwitterIcon />
    <FacebookIcon />
    <YouTubeIcon />
    <InstagramIcon />
</div>

Centering social media icons underneath Avatar component

1 Answers1