0

Please see the JSFiddle.

This is an adaptive design with "vw" parameters in the code. I want Text_1, Text_2 and Text_3 be aligned horizontally, which means that when i change the browser's window size, the distance from the left side of the screen to the beginning of the text is the same for those 3 words. With the current code I align them (via "margin" property), but as soon as the browser's window size changes, Text_2 and Text_3 move relatively to Text_1 (to the right when window size dicreases, to the left when it increases). What is wrong in the code please?

<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
  <li><span class="example">Text_2</span></li>
  <li><span class="example_translated">Text_3</span></li>     
</ul>
</ol>
</div>

.meanings_and_examples {
display: flex;
flex-direction: column;
}

.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}

ol.circle {
list-style-type: none;
}

li {
line-height: calc(1.1em + 1.5vw);
}

ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 1.3em;
}

ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.2em + 1.5vw);
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin: 0% 3.5% 0% -2.4em;
}

ul {
list-style-type: none;
}

.example {
width: auto;
text-align: left;
font-weight: 400;
}

.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
HexenSage
  • 117
  • 2
  • 10
  • Once again, your HTML is invalid. You are closing the `li` before opening the child `ul` - https://codepen.io/Paulie-D/pen/mddxPOJ – Paulie_D Nov 05 '19 at 15:20
  • 1
    Paulie, thank you for the example, appreciate that! The thing is that there are 2 _independent_ lists - OL (Text_1) and UL (Text_2 and Text_3). If you continue the logic of my list the next Text_4 will be an OL item with *#2* in the circle, while Text_5 and Text_6 will be UL items below. OL/UL lists are combined for _design_ purposes only, so UL is not a child in my case but a list *integrated into* the OL one (which is kept open till the end of the code!). So closing li after Text_1 supposes to close *OL item only*. Your approach makes numbering impossible: https://jsfiddle.net/t5mnu8ox/ – HexenSage Nov 06 '19 at 09:48

2 Answers2

0

I'm not sure what is the point of inserting the ul in the ol. But I think if is not mandatory, you should use them separately since you are enumerating same type of elements from what I can see.

Then there are several problems with your margins: your conter has width: calc(1.2em + 1.5vw); but your margins are margin: 0% 3.5% 0% -2.4em; .

I am guessing this is accomplished by trying different values.

But your couter witch has width: calc(1.2em + 1.5vw); is pushing the first element out of the list.

So the margin should consider that if you want the list items to be aligned. So your counter should have the margins something like margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);

I did a working example here . I am not sure if you want it exactly this way, but you can start from here.

But I have to ask: Do you really need one and one or you just use them so you can add before some of the elements the counter? Because it might be better to just use a class (for the counter) and use a sigle list for all elements.

Berci
  • 2,876
  • 1
  • 18
  • 28
  • 1
    Hi Berci, thank you! Regarding the point of having UL inside OL - purely design purposes (see my comment to Paulie-D above). Closing OL _before_ UL will stop numbering working. See this fiddle: https://jsfiddle.net/t5mnu8ox/ Text_4 goes under #1 again, though it should have #2, etc., etc. – HexenSage Nov 06 '19 at 09:44
  • Hello Hexen, I understood now. If you haven't figure it out already how to accomplish exactly what you wanted here is a fiddle I think is doing what you want: https://jsfiddle.net/dfyhoc7L/4/ . You might need to play with the margin for the counter on big screens, but as long as the margin-right value is `calc('margin-leftvalue' - 1.2em - 1.5vw);` you should be fine. – Berci Nov 06 '19 at 11:02
0

Okay, you have a lot of things going on, for your next question I would strip the fiddle of any code that is not needed for the example, all styling and such. Next you are using too many dynamic widths together and as Paulie_D said, you are not allowed to put anything other than li-tags in a ul-tag or ol-tag.

The main issue is that you have two lists, one within the other where the padding is very dynamic, I tried to change it so the padding matched the dynamic width of the bullet.

I kept your HTML and changed some CSS so it behaves like you want but you really should think of a new HTML setup.

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-weight: 700;
  word-wrap: break-word;
  text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
  margin-right: 1%;
  font-size: calc(0.5em + 2.3vw);
}

ol.circle {
  list-style-type: none;
  border: 2px solid purple;
  position: relative;
  padding-left: 10vw;
}

li {
  line-height: calc(1.1em + 1.5vw);
 
}

ol.circle > li {
  counter-increment: item;
  margin: 0% 0% 0.2% 0;
  border: 2px solid orange;
  padding: 0;
  position: relative;
 }

ol.circle > li::before {
  content: counter(item);
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  position: absolute;
  background: #1f2c60;
  color: white;
  box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
  width: calc(1.2em + 1.5vw);
  transform: translateX(-100%);
 }

ul {
  list-style-type: none;
  padding-left: 0;
  border: 2px solid red;
}

.example {
  width: auto;
  text-align: left;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  font-weight: 400;
  color: #5d78e5;
}
<div class="meaning">
<ol class="circle">
  <li>Text_1</li>
   <ul>
      <li><span class="example">Text_2</span></li>
      <li><span class="example_translated">Text_3</span></li>     
   </ul>
</ol>
</div>

See my modified fiddle for the behaviour you requested.

Geenkaas
  • 46
  • 4
  • Hi Geenkaas, your code keeps UL *inside OL* which should keep numbering logic working - this is very important! And both lists are perfectly aligned at any screen size, which was the main problem. I will have a closer look at your code in a couple of hours (and will write another reply here). :-) By the way, you were the only one who DIDN'T say UL *inside OL* is a problem - why? :-) – HexenSage Nov 06 '19 at 10:01
  • I started my answer by completely rebuilding your HTML because it was "better" . But I realised you probably had a valid reason for your setup (generated, external, whatever) so I tasked myself with keeping the HTML intact and figure out a solution for that. I would suggest you try to at least put the ol tag inside a li tag inside the ol so your HTML is valid but sometimes that is not possible. I also hope the source of your original problem is clear though, a lot of percentages and rems and what-not which makes calculation and thus alignment difficult. – Geenkaas Nov 07 '19 at 17:24
  • Thank you Geenkaas for this advice and your help - highly appreciate that! – HexenSage Nov 08 '19 at 15:54