Jump to content

Blocks created via code change position once page is released

Recommended Posts

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>

Link to comment
8 minutes ago, Pero said:

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>

Are you mentioning these blocks, what's the problem on editor mode

image.thumb.png.24c57638d9b54e33bd8dbd4baad7cc4e.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
26 minutes ago, Pero said:

You can try adding to Home > Design > Custom Css to align your items

#block-a3684d89ed8b801cd499 + .row .sqs-col-8 {
  width: 100%;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

image.thumb.png.59f1eda77d9660ecf332ef2c7f71ac89.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Susana_SQSP changed the title to Blocks created via code change position once page is released

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.