All solutions

Had a proper tussle with the padding and width/height of an absolute positioned component in a relative positioned parent. Everything should have worked just fine, but when I changed the padding the width/height would change. Had to settle with padding: 0; on it and adjust the margins of each of the children.

Had a hard time with grid-areas until I realised that the value of the grid-area property should not be encapsulated in quotes.

Changing up the image in this one between mobile and desktop sizes was a doozy, but managed to get a rather cool solution using some Vue functions.

Had a bit of a confusing time with all the emits flying around this app securing my already secured love of the coding practice of giving any and all things you create very descriptive names.

Beware when creating multiple controls in the same component. Different instances of the component do not share information unless you communicate data between the instances and not in the code of the component. It took me explaining the situation to phind to realise that I was not communicating data from a component instance to its parent and then back to the other instance of two components that share the same code. Either create unique components or put your defineEmits hat on.

A question I have is on margins and padding. Is it better to add padding in a parent component, or add margins to the components you're working with? Another question is on whether it is actually better to work in rem or px?

Does anyone know how to properly use Vue 3 with CSS custom properties to manipulate pseudo elements?

I would like to know what would be good ways to implement image references for vite-with-vue projects that will have the images properly build into the project using npm run build from the vscode terminal so that the images get properly referenced in a Github Pages build thereafter. One of the solutions I tried was messing with the vite.config.js file as well, so your solutions would be greatly appreciated, should they include this.

My code that used something other than the max-height CSS property is long gone, but here I had a tough time properly managing the expand/collapse transition. CSS transitions snap between height: auto; and height: 0; It also kept the space open where the answer text is kept with transform: scaleY(0). Any ideas on how to properly address that?