I was able to fix it. Here are the code.
/* To make button more visible inside the cover image (optional) */
.uh-avatar {box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); margin-top:-80px !important;}
.gh-toolbar-section a {background: rgba(255,255,255,0.6); color:#000;}
.gh-toolbar-section a:hover {background: rgba(255,255,255,0.8); color:#000; border-color:#fff;}
.uh-cover-has-cover .uh-head-text, .uh-cover-has-cover .uh-head-text .uh-display-name {text-shadow: 1px 1px #000;}
.gh-header .uh-display-name {font-size:21px; font-weight:400;}
.gh-header .uh-action-toolbar-wrap .uh-action-toolbar.gh-toolbar-section-member, .gh-header .uh-action-toolbar-wrap .gh-toolbar-section {margin-left:0;}
@media only screen and (min-width: 320px) and (max-width: 480px) {
.ow_header_img, .ow_header_pic {background-size: 850px 133px; height:125px;}
.ow_photo_item_widget, .ow_lp_photos .ow_lp_wrapper, .ow_lp_photos .ow_lp_wrapper:hover, .ow_photo_item_widget::before, .ow_photo_item_widget:hover::before {width:150px !important; height:150px !important;}
.ow_content_menu.h-tabs li {width:50px;}
.uh-head-text {margin-left:0 !important; width:100%;}
.uh-cover-image {position:static; bottom:0;}
.gh-header div.uh-head-text-wrap {padding-left:125px !important;}
.uh-action-toolbar-wrap {padding-top:12px;}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
.uhcv-cover {min-height:0; min-width:0;}
.uhcv-cover, .uhcv-cover img {width:100% !important;}
.uhcv-bottom-left, .uhcv-bottom-right {float:left; width:100%;}
.uh-cover {min-height:130px;}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
.uh-head-text {margin-left:0 !important; width:auto !important; max-width:300px;}
.uh-avatar-console div.hg-avatar-image {height:100px !important; width:100px !important;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.uh-head-text {width:auto !important; max-width:300px;}
.uh-avatar-console div.hg-avatar-image {height:100px !important; width:100px !important;}
}