JavaScript
Hey Guys 👋, I am new at web dev but I am have some little experience in python, Anyway, The help I want from you guys is about my style of writing JavaScript and any useful advice you can give me and also when I add a new book the remove and read bottom doesn't seem to work. PS my focus is on the JS not the HTML and CSS. LINK: https://codepen.io/Yussif-Karim/pen/mdgyPBw
How to expand the white background, When I click on the plus image?
HTML: <div class="container">
<div class="flex">
<img src = "icon-star.svg">
<h1>FAQs</h1>
</div>...

How to do a good responsive for large screens?
In the last few moment I'm having a weird problem. The design send a project, I do it almost like perfect pixel for my screen resolution, that is 1920x1080. But the designer have a large screen, I think 2560x1080. I use browser devtools to see the websites on this screen size, but he also have the default scale of this kind of monitors, that put 125% of zoom. There is some math that can help me to always make the websites correctly for this type of large screens?
What I'm doing know is: I that the values of a normal screen like mine and let's supose that the element has a width of 400px. So I use 67% of this value as default, on this case, 268px, and later I put a ' @media (max-width: 1920px)' and there I use the 400px, but I thing that probably exist a better way to do this. Can u guys help me, please?...
Fallbacks for svh units on older iOS devices?
Hi there I'm testing my CSS on older iOS devices as our site gets most of our visitors from iPhones and I'm running into an issue where they seem to think they can use svh but the result is always zero, and so any CSS rules using them won't fall back to any other rule, they'll just give the wrong value.
First I tried...
```scss...
Display image query in Nextjs
I take an image input from the user in a route called story, then I used useRoute query to navigate to the home route with the image as a query, then I entered it inside the image tag to display it, but nothing was displayed, and without any error to let me know from where the problem is coming from, this is the code that is used to display the image:
```js
useEffect(() => {
if (image) {...
How can i create this shape with css
I've tried skew, I've tried clip-path the issue is with clip path i cant retain the border-radius and for some reason it also losses the shadow

Responsive shop page layout - Grid/Flex?
Hey,
I'm stumbling on this problem for the 9000th time. I have made a webshop with two column layout:
left - text information
right - product information...

image not loading on vercel deployment
I m using react + vite , and the issue is that the destination page images r visible on my local host but when I deployed code on vercel the images don't load , I think it's a pathing issue but I m not sure what to do .
Deployment: https://chet-space-tourism.vercel.app/
And the GitHub for repo is : https://github.com/Chet25/spaceTourism
;-;...
Content overflowing
when the height of the screen is decreased the content of the container are overflowing and the content is responsive when the width is adjusted,also i want the image ogf iphone to be at the bottom edge of container.Please help me resovle it
link:https://stackblitz.com/edit/stackblitz-starters-7czjm2?file=index.html...
Issues with flexbox
Hi guys I am doing some practice for css because I am really bad and I am also learning tailwind at the same time.
my problem is I don't now why I can justify-center a div is what I am doing impossible or what am I doing wrong
```js
<div className="flex justify-center items-center gap-[4.5rem] h-[55vh]">
<div className="flex-col justify-center">/ISSUE/...

Good design ideas for smaller screen?
As you see in the image below the blue button that says "add" is way to big for the smallest size screens, Does anyone have any ideas to make this look better?
https://codepen.io/hrphyn/pen/QWPWVJa...

Inifinite Scroll width issue
I have been seeing this video: https://www.youtube.com/watch?v=iLmBy-HKIAw. There applies a solution when clips the animation, that is not working in the width I'm using
CSS border-image
Why cant i get
border-image: linear-gradient(red,green);
to work but border: solid red;
does, What could be causing it to do this?
cant put elements on the level a photo is
basically i am making a portfolio for myself while learning html css and js and i have a photo at the top and some text below it but when i add a new element for a home button and i want it to be at the top level like where the photo is it wont let me and it wont let me put anything in that area the photo is (creating a new element just puts it above where the element is on the left, see image)

sticky element move outside parent element
So... I don't really have an issue. It's just a question... But, i have always thought an element with position:sticky; cannot move outside the parent element. But i just realized today that it can actually move outside parent element... But this is really strange.
To make position:sticky; element move out from parent element, the parent element needs
display:initial;
. But the strange thing about this is that as far as i know display:initial;
will revert the display value to it's initial value (the default value) but even if you have never changed the display value of the parent element, it the sticky element wont follow until you add display:initial; to parent element.
Can anyone explain this to me because this really makes no sense at all. I am so confused 😂 ...Absolutely positioned element not behaving as expected
I expect it to stick to the div called flex but it isn't for some reason I've tried debugging In the pen it isn't working at all
https://codepen.io/Dev-T/pen/ZEZEaNJ...
Slider/Carousel
does anyone know how to recreate this? I tried slick and other slider library but no luck
https://dribbble.com/shots/6476011-Quotes-slider...
Unable to find the error
I'm trying to apply animation to a box,in the html i created a div with class ="box" and i gavE the animations,i wanted the box to move along the border of the viewport,and change color after the box moves along next side.But it is not moving along,its just changing the colors