We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Responsive? - Group Cover | Forum

matt
matt Jul 16 '15
Hi Sergey,

We are using Ross's Dark theme. Group cover doesn't seem to respond down to smaller sizes well.

Can you/ will you? Add support for responsive themes?

Thanks!
Sergey Kambalin
Sergey Kambalin Jul 20 '15
Hello matt,


I started working on this feature but It turned to be a very complicated task. I am still in progress. I will release the plugin update as soon as I complete it.

matt
matt Jul 20 '15
Thanks Sergey. Your efforts are appreciated.


Bruce Tran
Bruce Tran Jun 7 '17
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;}
}
The Forum post is edited by Bruce Tran Jun 7 '17
You do not have permission to reply this topic