Top aligning vertical text in CSS/HTML?
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,…
How to create a responsive circle with two lines of text in HTML and CSS?
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…
Html – how would I make a delete button work on a website
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…
How can I make a string of words wrap to the next line altogether in HTML/CSS?
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…
Css – Calculate position of point along edge of regular polygon?
Say I have a pentagon (and we number the sides, like moving around a clock): Starting from the center of the polygon, how do you compute the position of a point in these spots (along the line of the edge…
Html – Apply CSS style depending of tbody height
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…
Html – image loading on chrome but not safari
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');…
How to make a working Email hyperlink in HTML CSS
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…
Css – Animation in firefox browser
I made a button with an gradient animation border that is rotation. It works fine in Safari & Chrome, but in Firefox it's lacking the smooth keyframes. I tried to add the -moz- but it didn't work. Any suggestions how…
Html – how to center background image added by image sprites
.social-media-icon{ display: inline-block; } .social-media-icon a{ text-decoration: none; display: block; text-indent: -9999px; border: 2px solid #c3d4e2; position: relative; height: 36px; width: 36px; background: url(/img/social-icons.png) ; background-repeat: no-repeat; background-position: 50%; } .social-media-icon a:hover{ background-color: #c3d4e2; } .fb-icon a{ background-position: 0 0…