Thiết kế website giá rẻ

Question

I’m working on a custom section for a Shopify website where I need to display text in a circular manner using CSS transformations. However, I’m encountering an issue where the text characters are not positioned correctly within the circular boundary, resulting in a distorted appearance.

I have a circular div (<div class="circular-text">) containing several spans (<span class="char">) each representing a character of the text. Each span is styled with a rotation and translation to achieve the circular layout. Here’s the whole Liquid code for the section:

<style>
  .custom-section {
    height: 650px;
    background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
    position: relative;
  }
  
  .custom-section .container-wrapper {
    position: relative;
    width: 1510px;
    height: 430px;
    top: 100px;
    left: 75px;
  }

  .custom-section .text-section {
    width: 520px;
    height: 190px;
    position: absolute;
    left: 20px;
    display: flex;
    flex-direction: column;
  }
  

  .custom-section .title-container h2 {
    font-family: 'ITC Garamond Std';
    font-size: 64px;
    font-weight: 300;
    line-height: 70px;
    letter-spacing: -2px;
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .custom-section .text-container {
    font-family: 'iCiel Internacional', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    width: 60%;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .custom-section .images-wrapper {
    width: 960px;
    height: 430px;
    position: absolute;
    left: 625px;
    display: flex;
    gap: 30px;
  }

  .custom-section .images-wrapper img {
    width: 300px;
    height: 430px;
  }


  
  .circular-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333;
  }

  .circular-text .char {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: #333;
    position: absolute;
    transform-origin: center;
  }

  /* Adjust rotation angles for each letter */
  .circular-text .char:nth-child(1) { transform: rotate(0deg) translate(70px) rotate(0deg); }
  .circular-text .char:nth-child(2) { transform: rotate(10deg) translate(70px) rotate(-10deg); }
  .circular-text .char:nth-child(3) { transform: rotate(20deg) translate(70px) rotate(-20deg); }
  .circular-text .char:nth-child(4) { transform: rotate(30deg) translate(70px) rotate(-30deg); }
  .circular-text .char:nth-child(5) { transform: rotate(40deg) translate(70px) rotate(-40deg); }
  .circular-text .char:nth-child(6) { transform: rotate(50deg) translate(70px) rotate(-50deg); }
  .circular-text .char:nth-child(7) { transform: rotate(60deg) translate(70px) rotate(-60deg); }
  .circular-text .char:nth-child(8) { transform: rotate(70deg) translate(70px) rotate(-70deg); }
  .circular-text .char:nth-child(9) { transform: rotate(80deg) translate(70px) rotate(-80deg); }
  .circular-text .char:nth-child(10) { transform: rotate(90deg) translate(70px) rotate(-90deg); }
  .circular-text .char:nth-child(11) { transform: rotate(100deg) translate(70px) rotate(-100deg); }
  .circular-text .char:nth-child(12) { transform: rotate(110deg) translate(70px) rotate(-110deg); }
  .circular-text .char:nth-child(13) { transform: rotate(120deg) translate(70px) rotate(-120deg); }
  .circular-text .char:nth-child(14) { transform: rotate(130deg) translate(70px) rotate(-130deg); }
  .circular-text .char:nth-child(15) { transform: rotate(140deg) translate(70px) rotate(-140deg); }
  .circular-text .char:nth-child(16) { transform: rotate(150deg) translate(70px) rotate(-150deg); }
  .circular-text .char:nth-child(17) { transform: rotate(160deg) translate(70px) rotate(-160deg); }
  .circular-text .char:nth-child(18) { transform: rotate(170deg) translate(70px) rotate(-170deg); }
  .circular-text .char:nth-child(19) { transform: rotate(180deg) translate(70px) rotate(-180deg); }
  .circular-text .char:nth-child(20) { transform: rotate(190deg) translate(70px) rotate(-190deg); }
  .circular-text .char:nth-child(21) { transform: rotate(200deg) translate(70px) rotate(-200deg); }
  .circular-text .char:nth-child(22) { transform: rotate(210deg) translate(70px) rotate(-210deg); }
  .circular-text .char:nth-child(23) { transform: rotate(220deg) translate(70px) rotate(-220deg); }
  .circular-text .char:nth-child(24) { transform: rotate(230deg) translate(70px) rotate(-230deg); }
  .circular-text .char:nth-child(25) { transform: rotate(240deg) translate(70px) rotate(-240def); }
  .circular-text .char:nth-child(26) { transform: rotate(250deg) translate(70px) rotate(-250deg); }
  .circular-text .char:nth-child(27) { transform: rotate(260deg) translate(70px) rotate(-260deg); }
  .circular-text .char:nth-child(28) { transform: rotate(270deg) translate(70px) rotate(-270deg); }
  .circular-text .char:nth-child(29) { transform: rotate(280deg) translate(70px) rotate(-280deg); }
  .circular-text .char:nth-child(30) { transform: rotate(290deg) translate(70px) rotate(-290deg); }
  .circular-text .char:nth-child(31) { transform: rotate(300deg) translate(70px) rotate(-300deg); }
  .circular-text .char:nth-child(32) { transform: rotate(310deg) translate(70px) rotate(-310deg); }
  .circular-text .char:nth-child(33) { transform: rotate(320deg) translate(70px) rotate(-320deg); }
  .circular-text .char:nth-child(34) { transform: rotate(330deg) translate(70px) rotate(-330deg); }
  .circular-text .char:nth-child(35) { transform: rotate(340deg) translate(70px) rotate(-340deg); }
  .circular-text .char:nth-child(36) { transform: rotate(350deg) translate(70px) rotate(-350deg); }
  .circular-text .char:nth-child(37) { transform: rotate(360deg) translate(70px) rotate(-360deg); }
  .circular-text .char:nth-child(38) { transform: rotate(370deg) translate(70px) rotate(-370deg); }
  .circular-text .char:nth-child(39) { transform: rotate(380deg) translate(70px) rotate(-380deg); }
  .circular-text .char:nth-child(40) { transform: rotate(390deg) translate(70px) rotate(-390deg); }

  
</style>

<section class="custom-section">
  <div class="container-wrapper">
    <div class="text-section">
      <div class="title-container">
        <h2>Our jewelry</h2>
      </div>
      <div class="text-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit.</p>
      </div>
    </div>

    
    <div class="images-wrapper">
      <img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
      <img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
      <img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
    </div>
  </div>

  <div class="circular-text">
    <span class="char">W</span>
    <span class="char">e</span>
    <span class="char">'</span>
    <span class="char">r</span>
    <span class="char">e</span>
    <span class="char">t</span>
    <span class="char">h</span>
    <span class="char">e</span>
    <span class="char">b</span>
    <span class="char">e</span>
    <span class="char">s</span>
    <span class="char">t</span>
    <span class="char">i</span>
    <span class="char">e</span>
    <span class="char">t</span>
    <span class="char">h</span>
    <span class="char">a</span>
    <span class="char">t</span>
    <span class="char">y</span>
    <span class="char">o</span>
    <span class="char">u</span>
    <span class="char">c</span>
    <span class="char">a</span>
    <span class="char">n</span>
    <span class="char">b</span>
    <span class="char">e</span>
    <span class="char">y</span>
    <span class="char">o</span>
    <span class="char">u</span>
    <span class="char">r</span>
    <span class="char">s</span>
    <span class="char">e</span>
    <span class="char">l</span>
    <span class="char">f</span>
    <span class="char">w</span>
    <span class="char">i</span>
    <span class="char">t</span>
    <span class="char">h</span>
    <span class="char">.</span>
  </div>

</section>

{% schema %}
{
  "name": "Custom section",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "Text"
    }
  ],
  "presets": [
    {
      "name": "Default custom section"
    }
  ],
  "tag": "section",
  "class": "custom-section",
  "limit": 1
}
{% endschema %}

Despite specifying rotation and translation for each character, the text does not align correctly within the circular boundary, and some characters appear overlapped or misaligned. I’ve attached screenshots showing the current output and a mockup of how it should ideally appear.

Screenshots:

Current Output: enter image description here
Expected Output: enter image description here

So, can you guide me how I can do it as in the “Expected” screenshot

What I’ve Tried:

Adjusting the rotation angles and translation distances manually for each character.
Ensuring that the .circular-text container size and positioning are correct.
Checking for any conflicting CSS that might affect the text layout.

I’m looking for suggestions or corrections to ensure that each character of the text aligns properly within the circular boundary as intended. Any help or advice would be greatly appreciated. Thank you!

Thiết kế website giá rẻ

Danh mục

CSS circular text not displaying correctly with transformed characters