Site URL: https://www.jcatny.com/manga-artists
I created blocks with HTML and CSS. At first it seemed working well, but when I released the page, the blocks' positions is not the same with the edit page. The position collapse..
Does anyone help me with this?
HTML
<p><div class="maste">
<span class="tape">SUPPORT 1</span>
<fieldset style="background:#EECD77;
border-radius:10px;
font-size: 100%;
padding: 15px;
text-align:center
">
<fieldset style="background:#00000;
border-radius:10px;
font-size: 130%;
padding: 15px;
text-align:center
"><span style="color:#00000;">
<B style="color:#000000">オンラインで作品販売サポート</B></span>
<fieldset style="background:#00000;
border-radius:10px;
font-size: 70%;
padding: 12px;
text-align: center
"><span style="color:#00000;">
<br>毎月1度開催の“JCAT Gallery”では、SOLO展及びグループ展を開催しています。展示会での作品掲示では、作品を気に入ったファンが直接購入することができます。
</span>
CSS
<style>
.maste {
position: relative;
background-color: #EECD77;
box-shadow: 0px 2px 0px 0px #D4D4D4;
background-size: 80px 80px;
padding: 1em;
}
.tape{
position: absolute;
top: -0.75em;
background-color: rgba(255,255,255,.4);
border-left:2px dotted rgba(0,0,0,.1);
border-right:2px dotted rgba(0,0,0,.1);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding: 0.25em 2em;
color: #65513f;
transform: rotate(-3deg);
}
.maste p {
color: #65513f;
padding: 15px 10px 10px 10px;
}
</style>