How do you make font size automatically adjust so that the text doesn't overflow? const h1 = document.getElementsByTagName('h1')[0]; const content = document.getElementById('content'); let size = parseInt(window.getComputedStyle(h1).getPropertyValue('font-size')); while (checkIfOverflows(h1, content)){ size--; h1.style.fontSize = size + 'px'; } function checkIfOverflows(element, parent){ const…
I have a <ul> with children <li>. All of the <li> are siblings. I need them all to be siblings so that htmx.takeClass(); works to highlight the active item. My layout is like this: <ul class="list-group list-group-flush" hx-on:click="if (event.target.classList.contains('list-group-item')) htmx.takeClass(event.target,…
I'm beginning to design my website and learning HTML and CSS and this has stumped me a little bit. Not sure if what I'm trying is correct. I'm making a side banner, kind of like a physical media obi strip,…
body { display: flex; justify-content: center; align-items: center; gap: 15px; } .circle { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #333; color: #fff; font-size: 32px; font-weight: 600; border-radius: 50%; padding: 20px; aspect-ratio: 1 / 1; } <body> <div…
I am currently working on a javascript project with HTMl, CSS and Vue. The Project is to make a cookbook online that you can add your own recipes, and also delete recipes from. The issue that I have is that…
I'm trying to make the full name of the games wrap to the next line instead of breaking the line in the middle. I'm using Bootstrap library of code and my own CSS to make an introduction website for my…
I am working on an app in Android Studio. I made a few buttons in my HTML and had put the 'onclick=""' value as my functions for each button as needed. When the page loads, the JavaScript loads the function…
I have simple example that applies style when div height is less than 400px. <html> <head> <style> .card-container { container-type: size; container-name: sidebar; } .card-container { background: #ffe4e8; width: 200px; height: 100px; } @container sidebar (max-height: 400px) { .card-container div:first-child…
I am new to coding and finished this project for freecodecamp. For some reason my logo will load on chrome but not on safari. Any ideas why? const checkButton = document.getElementById('check-btn') ; const userInput = document.getElementById('text-input'); const result = document.getElementById('result');…
I'm currently learning HTML CSS and am trying to implement a hyperlink to my work email. My current line of code doesn't have any problems I think but I don't know how to add a email Hyperlink This is my…