Updating website breaks elements

Hello,

We Really Apologize about the Delay in reply to your Queries!

We Understand that you would like to Update your Website to the Newest Version of Canvas and We definitely recommend you to do so. But Unfortunately, transition from V2 to V4 can be daunting task taking into consideration that we released so many Updates in between and since Canvas is a HTML5 Template, all the Updates needs to be done manually. Also, according to your Message and your Issues, it seems that you have added your Custom CSS Codes directly in the Default CSS Files which comes with the Canvas Package rather than using a Custom CSS File which makes it even harder to track the Updates and change the Codes appropriately. So, it is Highly Recommended that you should create a css/custom.css (this already comes with the Canvas 4 Package) File and move all your Custom Codes directly into this File. More Setup Instructions about this can be found in the Documentation > Start > Customization Section.

Regarding your issues:

1. We provided you with the following Custom CSS last time you faced this issue, so please consider using this:

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

.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; }

1. We request you to provide us with a Live URL for the same so that we can check out this issue in more details and provide you with a more accurate solution for this.

2. You will need to add the .side-panel-trigger Class to the #side-panel-trigger Element for this to work correctly.

We would request you set up your Updated (Canvas v4) Website Online inside a Sample Folder of your Website so that we can check out the Issue online since this would help us find the issues more quickly and provide you with the necessary fixes. Thanks for your Patience once again.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

[sb_private_reply]We Extremely Apologize about the Delays once again and Really Really Appreciate your Patience with us. We just checked all our Emails/Comments and we found that we received your Emails 20 days ago. There is No Doubt that there was a Negligence on our Part in providing you with Timely Support and we can't apologize enough to you about this but we assure that we were not able to check your Emails since it was received in our General Folders and we filter Support Messages and reply only to those Messages on our Emails which are sent through the Envato Support System(due to SPAM Issues) because of which we were unable to detect your Email. And we have just checked your Comment regarding Extended Support Refund, so we do not message our Users based on a Negative Reply. We value your Feedback and we surely try to improve based on them. The main reason we Launched our Support Forum was to not miss any Support Queries from our users and reply to them in a Timely Manner. So, when you have posted your Question on the Support Forum, you are assured of a Reply from one of our Support Team Members. The Slight Delay was just because it was a Sunday and your Query required a Lengthy Response and required to be Replied by one of our Support Experts which were unavailable yesterday. We assure you that we were by no means ignoring your Query and trust us we have received more difficult queries. But we definitely agree that we were very late in replying to your Query no matter what and sincerely apologize to you about the same. We can surely provide you with the Support Extension Refund and still continue providing Limited Support to you.[/sb_private_reply]

Regarding your the Portfolio Issue, simply change the height: 100%; to height: 100% !important; in the .custom-port-overlay CSS Block. This will definitely fix your issue.

Do Let us know if we can help you with anything else or if you find any further issues.