I'm developing a piano keyboard using HTML + CSS. My code structure is as follows: :root { --piano-width: 600px; --piano-height: 150px; --piano-keys-gap: 1px; --piano-black-keys-height-perc: 0.6; } .piano-keys { display: flex; flex-direction: row; justify-content: center; width: var(--piano-width); height: var(--piano-height); } .piano-key…
How it should look "the correct version" How it looks, "the incorrect version" The metadata looks ok when the text is long, however, when the text is short for example, the user sends "Ok" the metadata is not positioned correctly.…
I have a main page and on this page there is "Add question" button, and if clicked the expected behaviour should be that a collapsible div will appear on the top of the page and also an overlay layer between…
.div1 { position: relative; padding-bottom: 25%; background: lightcoral; } .img-container { position: absolute; height: 100%; background: green; } .img1 { height: 100%; opacity: 50%; } <div class="div1"> <div class="img-container"> <img src="https://placehold.co/600x300" alt="" class="img1"> </div> </div> Chrome result (expected result): Firefox…
I'm trying to create a circular graph using only CSS and HTML, where each segment has a border with rounded ends at both the start and end. However, I'm struggling with positioning the ::before and ::after pseudo-elements to correctly mark…
I'm trying to get the nav to position to the left as relative. I've been encountering this issue quite a lot and can't get my head around it. **HTML. ** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,…
I have below code snippet, what I want to achieve is that .child which is panel should not be shown, to the top of .content class, however, .child is setting at top of .data class. I don't understand why this…
I am trying to position a svg with text in exactly the same position as div with text, no matter the font family used or font size The problem comes with the first element being offset in x and y…
so i want to swap them with their position any help?? Also some good video or reference with respect to this positioning thing because it is very confusing for me i tried to position relative then shifting it to bottom…
I have a navigation dropdown menu within a container. The HTML and CSS code provided is meant to display a language dropdown menu. However, I'm experiencing issues where the container's width doesn't adjust according to the length of the longest…