OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to Adjust Width, Height, and Additional Properties of a Circular Text Container in CSS?

  • Thread starter Thread starter gggggggggggggg
  • Start date Start date
G

gggggggggggggg

Guest
I am working on a custom section in my HTML/CSS project where I have implemented a circular text effect. However, I am facing issues with adjusting the width and height of the container holding this circular text. Additionally, I want to apply other CSS properties to this container to better control its appearance and positioning. Below is the relevant part of my code:


Code:
.circular {
  position: relative;
  width: 300px;
  /* Adjust the width here */
  height: 300px;
  /* Adjust the height here */
  border-radius: 50%;
  overflow: hidden;
}

.circular span {
  font: 26px Monaco, MonoSpace;
  position: absolute;
  width: 20px;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(12deg);
}

.char2 {
  transform: rotate(24deg);
}

.char3 {
  transform: rotate(36deg);
}

.char4 {
  transform: rotate(48deg);
}

.char5 {
  transform: rotate(60deg);
}

.char6 {
  transform: rotate(72deg);
}

.char7 {
  transform: rotate(84deg);
}

.char8 {
  transform: rotate(96deg);
}

.char9 {
  transform: rotate(108deg);
}

.char10 {
  transform: rotate(120deg);
}

.char11 {
  transform: rotate(132deg);
}

.char12 {
  transform: rotate(144deg);
}

.char13 {
  transform: rotate(156deg);
}

.char14 {
  transform: rotate(168deg);
}

.char15 {
  transform: rotate(180deg);
}

.char16 {
  transform: rotate(192deg);
}

.char17 {
  transform: rotate(204deg);
}

.char18 {
  transform: rotate(216deg);
}

.char19 {
  transform: rotate(228deg);
}

.char20 {
  transform: rotate(240deg);
}

.char21 {
  transform: rotate(252deg);
}

.char22 {
  transform: rotate(264deg);
}

.char23 {
  transform: rotate(276deg);
}

.char24 {
  transform: rotate(288deg);
}

.char25 {
  transform: rotate(300deg);
}

.char26 {
  transform: rotate(312deg);
}

.char27 {
  transform: rotate(324deg);
}

.char28 {
  transform: rotate(336deg);
}

.char29 {
  transform: rotate(348deg);
}

.char30 {
  transform: rotate(360deg);
}

.char31 {
  transform: rotate(372deg);
}

.char32 {
  transform: rotate(384deg);
}

.char33 {
  transform: rotate(396deg);
}

.char34 {
  transform: rotate(408deg);
}

.char35 {
  transform: rotate(420deg);
}

.char36 {
  transform: rotate(432deg);
}

.char37 {
  transform: rotate(444deg);
}

.char38 {
  transform: rotate(456deg);
}

.char39 {
  transform: rotate(468deg);
}

Code:
<h1 class="circular">
  <span class="char1">W</span>
  <span class="char2">e</span>
  <span class="char3">'</span>
  <span class="char4">r</span>
  <span class="char5">e</span>
  <span class="char6">t</span>
  <span class="char7">h</span>
  <span class="char8">e</span>
  <span class="char9">b</span>
  <span class="char10">e</span>
  <span class="char11">s</span>
  <span class="char12">t</span>
  <span class="char13">i</span>
  <span class="char14">e</span>
  <span class="char15">t</span>
  <span class="char16">h</span>
  <span class="char17">a</span>
  <span class="char18">t</span>
  <span class="char19">y</span>
  <span class="char20">o</span>
  <span class="char21">u</span>
  <span class="char22">c</span>
  <span class="char23">a</span>
  <span class="char24">n</span>
  <span class="char25">b</span>
  <span class="char26">e</span>
  <span class="char27">y</span>
  <span class="char28">o</span>
  <span class="char29">u</span>
  <span class="char30">r</span>
  <span class="char31">s</span>
  <span class="char32">e</span>
  <span class="char33">l</span>
  <span class="char34">f</span>
  <span class="char35">w</span>
  <span class="char36">i</span>
  <span class="char37">t</span>
  <span class="char38">h</span>
  <span class="char39">.</span>
</h1>

This is the my current section:

current situation


This is what it should be:

desired situation


Currently, I have hardcoded the width and height of the .circular container to 300px, but I when I change it to 160px, nothing changed. Here are my questions:

  • How can I make the width and height of the .circular container 160px?
  • What is the best way to apply additional CSS properties to this container without affecting the circular text effect?
  • Are there any best practices for managing the positioning of the circular text spans within the container when the container size changes?

Any help or guidance would be greatly appreciated. Thank you!

<p>I am working on a custom section in my HTML/CSS project where I have implemented a circular text effect. However, I am facing issues with adjusting the width and height of the container holding this circular text. Additionally, I want to apply other CSS properties to this container to better control its appearance and positioning. Below is the relevant part of my code:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.circular {
position: relative;
width: 300px;
/* Adjust the width here */
height: 300px;
/* Adjust the height here */
border-radius: 50%;
overflow: hidden;
}

.circular span {
font: 26px Monaco, MonoSpace;
position: absolute;
width: 20px;
transform-origin: bottom center;
}

.char1 {
transform: rotate(12deg);
}

.char2 {
transform: rotate(24deg);
}

.char3 {
transform: rotate(36deg);
}

.char4 {
transform: rotate(48deg);
}

.char5 {
transform: rotate(60deg);
}

.char6 {
transform: rotate(72deg);
}

.char7 {
transform: rotate(84deg);
}

.char8 {
transform: rotate(96deg);
}

.char9 {
transform: rotate(108deg);
}

.char10 {
transform: rotate(120deg);
}

.char11 {
transform: rotate(132deg);
}

.char12 {
transform: rotate(144deg);
}

.char13 {
transform: rotate(156deg);
}

.char14 {
transform: rotate(168deg);
}

.char15 {
transform: rotate(180deg);
}

.char16 {
transform: rotate(192deg);
}

.char17 {
transform: rotate(204deg);
}

.char18 {
transform: rotate(216deg);
}

.char19 {
transform: rotate(228deg);
}

.char20 {
transform: rotate(240deg);
}

.char21 {
transform: rotate(252deg);
}

.char22 {
transform: rotate(264deg);
}

.char23 {
transform: rotate(276deg);
}

.char24 {
transform: rotate(288deg);
}

.char25 {
transform: rotate(300deg);
}

.char26 {
transform: rotate(312deg);
}

.char27 {
transform: rotate(324deg);
}

.char28 {
transform: rotate(336deg);
}

.char29 {
transform: rotate(348deg);
}

.char30 {
transform: rotate(360deg);
}

.char31 {
transform: rotate(372deg);
}

.char32 {
transform: rotate(384deg);
}

.char33 {
transform: rotate(396deg);
}

.char34 {
transform: rotate(408deg);
}

.char35 {
transform: rotate(420deg);
}

.char36 {
transform: rotate(432deg);
}

.char37 {
transform: rotate(444deg);
}

.char38 {
transform: rotate(456deg);
}

.char39 {
transform: rotate(468deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><h1 class="circular">
<span class="char1">W</span>
<span class="char2">e</span>
<span class="char3">'</span>
<span class="char4">r</span>
<span class="char5">e</span>
<span class="char6">t</span>
<span class="char7">h</span>
<span class="char8">e</span>
<span class="char9">b</span>
<span class="char10">e</span>
<span class="char11">s</span>
<span class="char12">t</span>
<span class="char13">i</span>
<span class="char14">e</span>
<span class="char15">t</span>
<span class="char16">h</span>
<span class="char17">a</span>
<span class="char18">t</span>
<span class="char19">y</span>
<span class="char20">o</span>
<span class="char21">u</span>
<span class="char22">c</span>
<span class="char23">a</span>
<span class="char24">n</span>
<span class="char25">b</span>
<span class="char26">e</span>
<span class="char27">y</span>
<span class="char28">o</span>
<span class="char29">u</span>
<span class="char30">r</span>
<span class="char31">s</span>
<span class="char32">e</span>
<span class="char33">l</span>
<span class="char34">f</span>
<span class="char35">w</span>
<span class="char36">i</span>
<span class="char37">t</span>
<span class="char38">h</span>
<span class="char39">.</span>
</h1></code></pre>
</div>
</div>
</p>
<p>This is the my current section:</p>
<p><img src="https://i.sstatic.net/MB5PjFDp.png" alt="current situation" /></p>
<p>This is what it should be:</p>
<p><img src="https://i.sstatic.net/f5WrUQd6.png" alt="desired situation" /></p>
<p>Currently, I have hardcoded the width and height of the <code>.circular</code> container to 300px, but I when I change it to 160px, nothing changed. Here are my questions:</p>
<ul>
<li>How can I make the width and height of the <code>.circular</code> container 160px?</li>
<li>What is the best way to apply additional CSS properties to this container without affecting the circular text effect?</li>
<li>Are there any best practices for managing the positioning of the circular text spans within the container when the container size changes?</li>
</ul>
<p>Any help or guidance would be greatly appreciated. Thank you!</p>
 

Latest posts

Top