Create an infinite horizontal scroll animation
Regarding this amazing tutorial: https://www.youtube.com/watch?v=iLmBy-HKIAw&t=524s&ab_channel=KevinPowell. I followed Kevins tutorial and in that video Kevins used max-width of 600px for scroller container, for my project I am using max-width of 1300px for my scrolling container but I still get this "blinking" effect and a lot of empty space between last and first element. My code is the same as Kevins, but it still "blinking", I have short text inside scroller and I am not sure what causes thi...
How to solve responsive navbar issue
Hello guys, I was creating responsive navbar and I get stucked.
I encountered a problem while creating a responsive navbar. Specifically, I faced difficulties when trying to show the menu smoothly upon clicking the hamburger icon. Additionally, I implemented a feature where the header disappears as I scroll down 80px, which is working well. However, I would like the header to remain visible when the hamburger icon is clicked.
https://codepen.io/artbymali/pen/VwNNVgG?editors=0100...
Navbar sticky Going out of page
I've set up some js so when you scroll down, the top navbar becomes position: fixed. However; I am getting this issue where it appears the navbar goes beyond 100% of the screen as it stretches horizontally to the right and out of view. What could be causing this? I have a default container margin: 0 8rem;
Mobile Tailwind styles
🌊 Hi y all i m on the polish stage before posting a proj, (using Tailwind) currently looking for ways to place/allign the imgs child of the service-section above the desc-text in the mobile screens , I couldn t find a class to make this happen, can somebody help me with this pls?
https://play.tailwindcss.com/V9SaYzT9M0...
Shorten / improve CSS selector
Hi guys, I am wondering if there is a way to shorten that selector (used in a
querySelector
): :is(.ng-invalid, .ng-invalid:not(form) *):is(input, textarea)
?
What I want in the end is to select either input.ng-invalid
or textarea.ng-invalid
or .ng-invalid:not(form) input
or .ng-invalid:not(form) textarea
but I can't find a good way.
I tried something like .ng-invalid:not(form):is(*, * *):is(input, textarea)
where I hopped for :is(*, * *)
to sort of "replace" the first *
with .ng-invalid:not(form)
but of course it's not working!...:placeholder-shown stopped working on all browsers expect Firefox after vite.js bundles css
As the title states, I have a working solution in Firefox, which isn't working anymore in chromium and webkit browsers. I target textareas pretty simple with
textarea:placeholder-shown
, which is working great in Firefox. In all other browsers, nothing is rendering. Is that a known issue?Filling Input field using js
I'm trying to fill the hidden input field in hubspot form
tried using this code ...
<input name="last_visited_url_before_demo" class="hs-input" type="hidden" value="">
<input name="last_visited_url_before_demo" class="hs-input" type="hidden" value="">
How do i acheive this in flexbox without creating two rows of div
lets say i have an array of 7 elements, the max no of elements permited in a row is 4 and the rest should go in row(2). These remaining 3 elemts should start in the center (example image ).
How can i acheive this?...
CSS Responsive Images
I wanted to ask what is the best approach to position images in this context, resizing an image according to screen breaks, and putting them around a container in exact positions according to the pictures I added. What I would do is put them in absolute pos. but I don't know If it would be a good idea to position them within a parent div (to make the div make the responsive resizing), or just make the image responsive by itself with a <picture> <source> tags.
Menu dropdown issue with nested items
Hi on this test site https://stage.dembetheatre.org/
I have a dropdon menu that has an icon that is used in mobile menu to open close nested levels
for the desktop version i have an issue in the i need the icon backround and color to change when the <li> is hovered but at the moment only the main element is taking the hover state, i need to include the icon background and color...
please let me know what i am missing, i have tried removing all styles from all elements other than the li but i am unable to target the icon element to change state when the associated nav item is hovered...
how to isolate an element from specific styles
i want to isolate this .not-content element from global styles but i want an other
styles to effect
```css
:where(:is(button, input, optgroup, select, textarea)) {
font-family: inherit;...
Creating UI for game
I need to create a UI element for my project I have issue creating it and it's a little challenging
Vscode html relative links auto updater?
Hello all,
In Vscode if i move one of my root html files with navigation bar and links into a new folder, is there a way that vscode can auto update the links for me?
Any advice would be greatly appreciated....
Displaying a border image over another image
So this is what i'm sitting at
```css
.inner-image{
position: absolute;
right: 0px;...
Grid Layout Not functioning responsively
I'm completely lost on how to make this fit in my at all times
I've tried setting a min and max height but i don't think i understand them well enough so i couldn't get it to work
i've tried changin the main message container to 90% and still doesn't look the part
```html
<div class="main-message-container"> ...
main-message-container
main-message-container
html input behaviour
i've been wondering about this for awhile. when your text input starts running out of room the right side of it starts to disappear (as shown in this screen recording; gave the input a bg of hotpink to further illustrate) and its value starts getting cut off. is there a way to stop this behaviour or always make sure its the width of its value? (well besides min-width: npx or something)
like does it recognize its input.value as content ? doesnt seem like it or it wouldnt hide itself, it would overflow which would be better....
get value of sibling above
Hey, if i have a structure like so:
...
<p class="a">...</p>
<p class="b">...</p>
<p class="a">...</p>
<p class="b">...</p>
Can't figure out how to wrap text under an image
Basically, what I want to achieve is this (1st image):
https://prnt.sc/EO_CIn76U9UT
The closest I can get to my desired result is with flex - which results in this (2nd image):
https://prnt.sc/kyvUnM2vIww4...