Lord Of Insanity
KPCKevin Powell - Community
•Created by Lord Of Insanity on 4/2/2024 in #front-end
Some serious problems with my CSS
1 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 3/12/2024 in #front-end
CSS keeps adding an unnecessary gap
Right, so I've made a div with an input and button.
Here is the CSS:
.subscribe-box {
background-color: var(--clr-light_2);
padding: 0.4rem;
border-radius: 100rem;
display: flex;
gap: 1rem;
width: min-content;
}
.subscribe-box input {
background-color: transparent;
border: 2px solid var(--clr-light_1);
border-radius: 100rem;
padding: 0.3rem;
}
.subscribe-box button {
border-radius: 100rem;
padding: 0.3rem;
background-color: var(--clr-primary);
border: none;
color: var(--clr-light_1);
}
Here is the markup:
<div class="subscribe-box">
<input type="email" placeholder="Email Address" />
<button>Subscribe</button>
</div>
The problem is that the gap is applied to both the left and right side of the button. Theoretically, as there are only 2 elements in the div, only the left-side gap should exist.
What could be causing this?
21 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 4/17/2023 in #front-end
Outline gets cutoff when focused
34 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 4/13/2023 in #front-end
How can I make my video background stay paused on all pages?
(Codepen for context: https://codepen.io/BravoLima2k4/pen/zYmrzox)
I have a custom video background for my site, which you can pause if you don't like the moving background. There is also background music which is paused via the same method. However, I want it so that if you pause the background video on one page, it stays paused on all other pages, and vice-versa for when you unpause, it unpauses on all pages.
Also as you many notice when you scroll, after a certain distance a blurred background will slide down behind the primary nav, but when you scroll back up it just disappears, and I can't figure out how to make it reverse the transition.
Does anyone know how to do either of these? Thanks
3 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 4/3/2023 in #front-end
How can I make my primary nav dropdown slide down with an animation?
(JSFiddle for context: https://jsfiddle.net/25ghjzr0/4/)
I have a dropdown menu in my primary nav, which appears when you hover a link. I achieved this using display none to flex. I can't figure out how to animate it so that it goes from height 0% to height auto. The dropdown itself works but the links inside don't. Does anyone how how I can achieve this? Thanks
40 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 3/27/2023 in #front-end
Why is my JS not working?
(JS Fiddle for context: https://jsfiddle.net/qLry5cwx/2/)
The js is supposed to display a modal but it appears to not even try to execute. The code still works in another project of mine, from which I ripped all of the code, but not on my new site. I cannot figure out for the life of me why it isn't working. Can someone help me? Cheers
9 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 3/25/2023 in #front-end
Why do only some styles in my media query work?
(Jsfiddle for context: https://jsfiddle.net/0w34L6sr/10/)
For some reason, it seems that only some styles defined in my media query for width are applying when their parameters are achieved. Like when the screen width is less than 50rem, the icon font size should reduce from 2rem to 1rem and the left border on the span should disappear, but neither appear to apply.
Another problem with media queries that I'm encountering (not in the jsfiddle) is that some styles have to be in their own media query to work, even though the query parameters themselves are identical.
Why is this happening? Thanks.
5 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 3/22/2023 in #front-end
How can I make my navbar responsive with 8 links?
I've made responsive navbars before, but only with 3 or 4 links. I'm developing a digital portfolio, but the navbar has 8 links in it. This Jsfiddle will show what I have: https://jsfiddle.net/7nwg6v5k/7/.
I'll make it so that when the screen gets too narrow it transitions to a hidden menu. On full-size screens my current nav works well, but even at slightly smaller screens the text wraps and some links overflow.
I'm not sure of a good way to make this work. I don't want it to change to a menu before screen with gets below one third of full size. Sorry if I've not worded this well. Anyone have any ideas? Thanks
3 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 3/7/2023 in #front-end
Keep getting error "Uncaught TypeError: Cannot read properties of null (reading 'classList')"
I'm making a js-actuated modal but I keep getting the error "Uncaught TypeError: Cannot read properties of null (reading 'classList')". This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Custom Modal</title>
</head>
<body>
<button onclick="openModal()">Open Modal</button>
<p class="modal-content hidden">This is a modal</p>
<script>
const modalcontent = document.querySelector(".modal-content");
function openModal() {
modalcontent.classList.replace("hidden", "visible");
}
</script>
</body>
</html>
How can I fix this? Thanks12 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 2/24/2023 in #front-end
How can I get the gap between my grid elements smaller?
3 replies
KPCKevin Powell - Community
•Created by Lord Of Insanity on 2/21/2023 in #front-end
How can I stop a parent from growing when font size increases?
I've figured out how to make my navbar links to grow in size when hovered or focused on, but the other navbar links shift right and the navbar gets too tall when the font size increases. How can I do this? Thanks
3 replies