Problem after update?

I was with 4.2 WP, and updated to the newer version. In first look, no problems, till i didn’t update page’s content. I have projects listed with pages.
They look like that:

https://prnt.sc/m3nizj

But when i Update the page, even without changes, in html editor mode, it brokes.

Looks like that after that:

https://prnt.sc/m3nj66

Images becomes big, code effects brokes. But when i save it from the new version of WP, everything brokes. The new WP, add “br” everywhere and change the lines? I’ve tryed the code in new page with one project, the same results. Why it brokes? What is lacking or that’s cuz the new WP. It works fine before i make any changes to it, it was ok in 4.2 wp.
Shortcode Ultimate plugin is uopdated too, because without it, the site brokes.

http://prntscr.com/m3nkah – how it add br and change lines.

Part of the original code with one project and start effect code:

<style>
.otaku-overlay{
  display: block;
  position: absolute;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  text-align: center;
}
.otaku-effect{
  position: relative;
}
.otaku-frame{
  float: left;
  margin: 0 0.45em 2em 0.45em;
  border: #000 1px solid;
  padding: 2px;
}
.otaku-img{
  border: #eee 4px solid;
  width: 180px; 
  height: 252px;
  padding: 2px;
}
.otaku-expand{
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.otaku-effect:hover .otaku-overlay{
  opacity: 1;
}
.otaku-effect:hover .otaku-overlay .otaku-expand{
  bottom: 50%;
  margin-bottom: -50px;
  opacity: 1;
}
.otaku-title{
  display:block;
  width: 190px;
  font-size: 14px;
  font-family: Times New Roman;
  font-weight: 700;
}
.otaku-titlee{
  font-size: 14px;
  text-decoration: none;
  font-family: sans-serif;
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  line-height: 80%;
  word-spacing: normal;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  text-indent: 0ex;
  color: #fff;
  margin-bottom: 55px;
 }
</style>
<script>
$(function() {
   $(".post-body").css( "border", "none" );
});
</script>

[su_tabs]
[su_tab title="Настоящи - Отаку"]
[su_animate type="fadeInRight"]
<div class="otaku-frame"><div class="otaku-effect">
<img src="http://otaku.bg/forumpic/vermilion.jpg" alt="" class="otaku-img" /><div class="otaku-overlay"><div class="otaku-expand">
<p class="otaku-titlee">Lord of Vermilion: Guren no Ou</p>
<a href="http://otaku.bg/?page_id=67&playid=286"><img src="http://otaku.bg/forumpic/bgyjuRs.png"></a><br><br>
<a href="http://otaku.bg/?page_id=8459"><img src="http://otaku.bg/forumpic/iB3IPop.png"></a>
</div></div></div>
</div>[/su_animate] 

Can we fix this problem, and why new version pf WP brokes that code, not showing it correctly? Or should i change back to 4.2 backup.

• This topic was modified 7 years, 1 month ago by qnkov.