you see at the right and and the left the image is white not full stretched. How can I stretch it with good quality ? code: .bg { background-image: url('/app/assets/bg.jpeg'); background-size: contain; background-repeat: no-repeat; height: calc(100vh - 196px); background-position: top;…
in css below, body selector have priority over universal selector. * { color: rgba(255, 3, 3, 0.966); } body { color: rgb(103, 231, 18); font-family: sans-serif; } but when i load simple HTML like this: <!DOCTYPE html> <html> <head> <meta…
Heres my code : <audio loop autoplay> <source src="song.mp3" type = "audio/mpeg"> </audio> my "song" folder is saved in the same directory as the code file , so that cant be the issue ,the problem is that the song isnt…
I have made a card container which contains an image and a paragraph. I gave the card container display flex and align-items and justify-content both centre. The image got centered as expected but the paragraph is not getting centred. I…
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…
/* CSS */ em {font-style: italic; background yellow} ::autonomous-not-child-of-a-p-element-? :: em {font-style:normal; background gray} Given two situations both using <em> differently, in need to be styled differently. The first case contains a paragraph element and within it one or multiple…
Beginner here. I have an HTMl table with buttons and I want a button to toggle open a form with the values from that row. Problem is, if I have multiple rows in my table, it opens multiple forms for…
I'm creating a really simple webpage that makes you draw a 50x50 pixel two-colors image you can export (I didn't implemented the function to do that yet) that I will use for a next project I called "nork". Here's the…
My footer elements are loading with dynamic id's. I used as follows $(document).ready(function () { $("[id^='footer']").click(function (evt) { evt.preventDefault(); if (window && window.siteConsent && window.siteConsent.manageConsent) { window.siteConsent.manageConsent(); } console.log(evt.target.id) }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <a href="level2Link.NavLink" class="f-link managecookieShow" id="footer-nav-ManageCookies one1" aria-label="level2Link_AriaLabel">…
Problem I want to bigger width for my flex images. It is shrinked up and I cannot understand why i cannot increase the width of it. display:flex; max-width:95%; width:95%; margin:auto; background-color: #052F1A; gap:10px; } .bowl_images_section_1{ display: flex; background-image: url(./images/piece-1.jpg); background-size:contain;…