How to change the responsive smaller image 140×140?

Hello @tedtang

The layout of the profile is responsive. The default profile photo size is 190px. The profile photo size is 140px if the profile area is wider than 500px but narrower than 960px. The profile photo size is 100px if the profile area is narrower than 500px.

You can override the style by adding CSS code to the field “Additional CSS” on the page wp-admin > Appearance > Customize > Additional CSS. Use classes uimob960, uimob800, uimob500, uimob340 to specify styles for smaller screens.??? See the example below. This example changes profile photo visible size to 150px, but you can use another size.

/**
 * 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(-150px/2 - 5px);
	width: 150px;
	height: 150px;
	max-width: 150px;
	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(-150px/2 - 5px) !important;
	width: 150px !important;
	height: 150px !important;
	max-width: 150px !important;
}

Regards

Thank you, that was helpful. I was able to use your CSS example to adjust the profile image size at different widths. Everything worked except for the class for uimob960. For some reason, that selector doesn’t seem to be applying. As I’m inspecting, I see uimob800 but never see uimob960. This is what I ended up using:

/* profile photo size for medium devices (Tablet) */
.uimob960.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
    width: 300px !important;
    height: 300px !important;
    max-width: 300px !important;
}
.uimob800.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
    width: 250px !important;
    height: 250px !important;
    max-width: 250px !important;
}
/* profile photo size for small devices (Mobile) */
.uimob500.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
}
.uimob340.um.um-profile .um-header .um-profile-photo .um-profile-photo-img{
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
}

Hi @tedtang

Maybe the profile width is limited and never comes wider than 800px.

The profile width may be limited by the container width that depends on your theme.

The profile width may be limited by the “Profile Maximum Width” setting on wp-admin > Ultimate Member > Settings > Appearance > Profile. Try to set 100% in this setting.

Regards

I just tried this, but it still skips 960. Before any changes, I had it set to 1000px.

Thanks for all your help!

The plugin should add the class uimob960 to the profile container if it is wider than 800px but narrower than 960px. Maybe the profile width is not in this range.

Note that UM responsive feature is based on the block width, not the screen width.

Hi @tedtang

This thread has been inactive for a while so we’re going to go ahead and mark it Resolved.

Please feel free to re-open this thread if any other questions come up and we’d be happy to help. ??

Regards