How to create a responsive card with an image ?
Hello, I would like to create cards to display projects I have worked on for my portfolio. I would like to create something like that.
My problem is mainly with the images, I don't really know how to display them properly on different screen sizes.
I have tried to give them a certain height in % but it messes the height of the card. I have tried to give them a fixed height in rem but it's not really responsive even with media queries....
Why Next local server is not working π?
When I run npm run dev in the terminal it doesn't show any error and my Next project starts running at port: 3000.
When open localhost:3000 in my browser it keeps loading and then show unable to connect. Please me anybody....
relative width not working while animating div collapse using MUI's transition API
I have an input bar that can collapse and expand on
onClick but the issue is that it's not expending entirely in a single go. As you can see in the video, the element expands, stops, then expands completely.
```tsx
<ButtonGroup
sx={{
justifyContent: 'flex-end',...How do I copy this cool bento style website
https://lucasporterbakker.com/
I suck at anything that I can't use flexbox.
I'm aware that he used
display:grid but I don't know how to get a bunch of boxes with different sizes and also make it responsive. Do I need a bunch of media queries to achieve it?...Wrap button around another button
In my code, how can I cause the text of the second button to wrap around the first one? With flex they are always next to each other, but I want it to just wrap around as you see it with images and text in newspaper for example.
Here the playground:
https://jsfiddle.net/jytb2n61/18/...
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">...