Hi, I'm a totally newbie here and I have a question. Let´s say I want to add ...

[Comment from a deleted post]

𝓟𝓪𝓾𝓵𝓲𝓷𝓪❤️𝓚𝓪𝓻𝓪𝓭𝓪𝓰𝓲𝓪𝓷 • Jul 26 '20 • Edited

Hi, I'm a totally newbie here and I have a question.
Let´s say I want to add a new line with new sounds, using keys z,x,c and so on.
I tried to fix html with break and paragraph but it is not working.
Is there another way? I'm kinda lost and burned out trying to figure it out, and I'm pretty sure it is pretty easy :(

Anik Khan • Jul 26 '20

hmmm.... I am not sure how did you approach it. Here's how you add a new sound-

  <div data-key="90" class="key">
            <kbd>Z</kbd>
            <span>New Sound Name</span>
        </div>

Then add the corresponding audio sound-

<audio data-key="90" src="your sound source here"></audio>

Here the data-key has to be the same for both parts. It is 90 here.
Is that what you asked for? Let me know

𝓟𝓪𝓾𝓵𝓲𝓷𝓪❤️𝓚𝓪𝓻𝓪𝓭𝓪𝓰𝓲𝓪𝓷 • Jul 26 '20 • Edited

No, I want a new line under the first set of keys, under keys A to L, down under I want to ad z to M, for example.
But I keep adding keys and they are on the same line, not under.
Sorry my english.

Anik Khan • Jul 26 '20

Aah got it. Let me work on this amazing addition after my dinner, okay? I will be in touch shortly😀It would be a nice thing to work on for me as well

Anik Khan • Jul 26 '20

@paukaradagian Hey! You have to fix it from CSS. As I used flexbox for positioning the element, I have to make it with flexbox.
Add this code to the CSS file-

/*TEST*/
.break {
    flex-basis: 100%;
    height: 0;
}

Then whenever you want a line break insert this-

<div class="break"></div> <!--For new line break -->

Say for example you want a line after the L then it would be like-

 <div data-key="75" class="key">
            <kbd>K</kbd>
            <span>Snare</span>
        </div>
        <div data-key="76" class="key">
            <kbd>L</kbd>
            <span>SY</span>
        </div>

        <div class="break"></div> <!--For new line break -->

        <div data-key="90" class="key">
            <kbd>Z</kbd>
            <span>SY</span>
        </div>
        <div data-key="90" class="key">
            <kbd>X</kbd>
            <span>SY</span>
        </div>
        <!-- Just like this continue........ -->

Box will adjust until you add up to 9 divs. Further question? Plz knock me on the chat or LinkedIn (can be found from my profile); love to collaborate.

𝓟𝓪𝓾𝓵𝓲𝓷𝓪❤️𝓚𝓪𝓻𝓪𝓭𝓪𝓰𝓲𝓪𝓷 • Jul 27 '20

Thank you so, so so much!!!