No Scroll bar design
I am working on a project and the client has said that their shouldn't be any main scroll bar (either horizontal or vertical). There can be scroll bars for individual sections and most of the time, user will be navigating using buttons (like carousels). The project is having a user panel and admin panel.
I want to ask if this is practically possible since it should be responsive as well.
If there is an article on it, please share the link....
Side Scrolling Issue
I have fixed these issues before but this one has me stumped. As soon as I apply flexbox to the nav bar links and I resize to a certain point, the about link overflows to the right instead of resizing. I have tried the grid repeat auto-fit feature with grid-template-columns after I changed the nav>ul from flexbox to grid and everything I can think of and nothing is stopping it. I have not used media query because I feel there is a way to fix it without doing so.
All help is appreciated.
https://codepen.io/Donald-Rankin/pen/NWJqaVb...
How to force parent grid to flow when nested grid content overflows
Is there a property I can give the parent grid to stop this from happening?
Clip a image given xyhw
I have a spritesheet like image, and I only want to show a certain part of it.
I have the top, left, height and width of this part within the image, and I want the image to be 1em wide (this is different than the pixel width of the clipped section). The image() function with the xyhw seems like what I want, but it's not supported in browsers yet.
How do I do this?...
POST request is not shortening links in my project
Hello, please I need help with my project, it’s a URL shorter. I'm trying to get the shortened links to show but when I submit there’s no shortened link. Please how do I solve this? Live project : https://url-shortner-delta-nine.vercel.app/ Github link : https://github.com/kenekc18/URL_Shortner
How do I shorten this code?
https://jsfiddle.net/sf6zdx9p/1/
From lines 9-32 I have conditions for each index of the li that is clicked to either remove or add an active class to that list item as well as the corresponding review in the container above that matches its index. I am looking to shorten that into less code with a function, but I am not sure how....
My sticky nav bar not sticking and out of position
I want the nav to be on top of the upper part of the background, yet I want it to be sticky as well. I tried moving the nav inside of the hero section, but that only allowed it to stick to the hero section, and then after scrolling past there, it disappeared. What is the most responsive solution to this. Thank you!
https://codepen.io/Donald-Rankin/pen/NWJqaVb...
How do I make this grid?
How do I make this grid? The image on the left is taking up most of the space, and the other two items on the right are fitting in, respecting the height generated by the first image.
i am in angular please help to create same bookflip animation in pdf like this
https://www.hktennisopen.hk/files/booklet_2023/
i already used this plugin https://www.npmjs.com/package/ngx-extended-pdf-viewer
and here is my code ...good and free 3d models for threejs + inspiration
Currently building a threejs react website where I am experimenting with 3d models in threejs. Do you guys have any inspiration what the setting should be? I tried a space theme, but I am not 100% what I can put there. Also, is there any site that provides great (animated) 3d models. Sketchfab is one site but I wonder if there are others
responsive grid react window
I have grid container with row and col is dynamic from data serting
I render list of card
I want to virtualise this list with grid list of react window or birtuoso
But the problem is lost responsive and. All card not showned correctly
Who have ide to reponsive grid virtualization...
A Problem With Setting The <main> Content To Full Viewport!
I have a page where I was having problems with setting the navbar at the top of the viewport. I was able to fix it with setting the border-top to some 20px whenever you load the site so that the <main> content doesn't overlap with the navbar. Now in the navbar I have two links which link to the 2 sections in the <main>! Whenever I click one link the <main> overlaps the navbar which is something I don't want. I want whenver you click the link the <section> / <main> stays below the navbar as intended and doesn't overlap the navbar content.
I have a link to the codepen to see the full code. Try loading the website in the browser & notice how <main> content is below the navbar as intended but whenever you click the "work" link in the navbar the content of the <main> it overlaps. [https://codepen.io/inalelub/pen/QWobwRW]...
Needed help regarding Next Js and shadcn UI
Can anybody tell me that how I can handle active state of navbar element in next js or shadcn library. Just like we can do in Link component of react router using active props.
But I want to ask that how I can do this in next js or shadcn....
How to stop sentence from breaking before certain words?
I have a set of category titles that all have the Unicode character fora down arrow at the end of the title. What I would like to do, somehow, is that as the divs that the titles are in shrink the titles are broken up from a single line to multiple lines EXCEPT for the Unicode character. I want that to always be on the same line as the last word of the title. Here is the HTML and relevant CSS:
```<body>
<header id="siteHeader">
<nav id="siteNavigation">...
Question regarding Alpine.js
I need to implement a third party newsletter subscriber form and those docs tell me, that when I want a custom success callback, I would need to implement this:
```
<script type="text/javascript">
function mySubscribeSuccess( form )
{...
Why is my footer (sometimes) behind my other content?
I'm trying to force my footer to the bottom of the page, on pages with little content this works fine (using flexbox) but pages with long content the footer is displayed behind some of the content?
why is this happening ? how can i make it stop. i want that pyramid to be half show on full screen.
Everything is so big and i used the values same as my figma design but still.
i have this background image it should show 50% of it in full desktop mode and should be sticking to right side all the time and when it comes to mobile and tablet screens then it should show 20 to 30% only...
instagram api
Im trying to build a search function on my page so that a user can search for their instagram profile and get their profile information without logging in i have seen other platforms implement a similar feature but after reading the documentation on the graph api and basic display api the functionality is not available from the official api’s meta provides i am wondering if this is being done using bots and web scraping and if anyone has done this before or has a clue on how to do it… below is an example of the functionality i am trying to achieve
https://www.youtube.com/watch?v=TcEzmIYi2Jg...
How do I recreate this line?
So I am currently trying to recreate websites to test my (awful) knowledege in CSS/HTML despite learning for months I wanted to know how I can recreate that line looking thing shown under the header