How to resize portfolio-desc overlay / i-overlay link not working in mobile

Hi Semicolon team,

I just updated my website and require a little help.

1) How do you resize the white BG of the portfolio-desc?

I am controlling the font size according to the responsive size, but no matter what I can't change this big white background behind the text.

.portfolio-2 .portfolio-desc h3 { font-size: 14px; }
	
.portfolio-2 .portfolio-desc span {font-size: 12px;}

As you can see from Screenshot_1, when I'm viewing my website from a smaller size, the white background of the portfolio description is way too big and I want to make it smaller, I tried playing with height but it doesn't change anything

2) If I change the opacity of the white BG in portfolio desc, when I overlay there is a white solid in the bottom
If I wanted to lower the opacity of the white BG, there is this white solid in the bottom of the image as shown in Sreenshot_3. How do I fix this? Below is the code I tried:

.portfolio-2  .portfolio-desc {
	background-color: rgba(255, 255, 255, 0.7);
	}

3) When viewing my website as mobile or 480px to 767px, my i-overlay links don't work
So I noticed that when I click my videos from these sizes the links take me to the webpage directly and does not popup the videos anymore. Is there anyway to fix this?
Please check my website and try to click portfolio links at the smallest viewing size: www.jasonhan.com

Thank you!
Jason

Okay so I found out a solution for question #1, which is to change the height in the CSS below

.portfolio-2.portfolio-notitle .portfolio-desc {
	height: 90px;
	bottom: -91px;
}

I just really need help with question #3, and #2 if you have time

Below is my overlay video css that you guys helped me with in the past. I'm not sure what to change for @media 480px to fix the link issue

.custom-port-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
}

.i-overlay.port-overlay-icon { background: rgba(0,0,0,0.5); }

.i-overlay.port-overlay-icon i {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #F5F5F5;
	width: 40px !important;
	height: 40px !important;
	margin: -20px 0 0 -20px;
	font-size: 18px;
	line-height: 40px;
	text-align: center;
	text-shadow: none !important;
	color: #444;
	border-radius: 50%;
	-webkit-backface-visibility: hidden;
}

.i-overlay.port-overlay-icon i.icon-line-play:before {
	position: relative;
	left: 2px;
}

.i-overlay.port-overlay-icon i:hover { color: #1ABC9C; }

Thanks,
Jason

Edit: Okay I fixed #3 as well... a simple search got me the solution I needed
http://support.semicolonweb.com/forums/topic/webpages-opened-in-data-lightboxiframe-open-in-new-window-on-mobile/

Now the only thing I need help with is question #2