Customize profile photo size on the profile page

You can customize profile photo visible size with a CSS snippet. See example below. In this example we change the profile photo size to 200px on Desktop, 150px on Tablet, 100px on Mobile. You can use other sizes.

You can override the style by adding CSS code to the field "Additional CSS" on the page [wp-admin > Appearance > Customize > Additional CSS].

/* Change the profile photo size */
.um.um-profile .um-header .um-profile-photo{
	top: 0px !important;
}
/* profile photo size for large devices (Desktop) */
.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
	top: calc(-200px/2 - 5px);
	width: 200px;
	height: 200px;
	max-width: 200px;
	box-sizing: content-box !important;
}
/* profile photo size for medium devices (Tablet) */
.uimob960.um.um-profile .um-header .um-profile-photo .um-profile-photo-img,
.uimob800.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
	top: calc(-150px/2 - 5px) !important;
	width: 150px !important;
	height: 150px !important;
	max-width: 150px !important;
}
/* profile photo size for small devices (Mobile) */
.uimob500.um.um-profile .um-header .um-profile-photo .um-profile-photo-img,
.uimob340.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
	top: calc(-100px/2 - 5px) !important;
	width: 100px !important;
	height: 100px !important;
	max-width: 100px !important;
}

NOTE: We have created this code example to provide guidance and to make it easier for you to implement this code into your website. However, we are not able to provide any support when it comes to customizing the plugin. If you need help implementing this code, please hire a developer.

Expected result on desktop:

Expected result on tablet:

Expected result on mobile:


The image may look blurry or pixalable if its real size is much smaller than visible size. Please read the article "Profile Photo Size" to get know how to configure the profile photo real size.