Vite integration on pre-existing react project.. 404 but dev server running
This is the existing project: https://github.com/nnall/CRUDApps/tree/main/signup
Because the backend is already set up in my current project, I'm reluctant to scrap it and use
npm create vite@latest to create a whole new react project through the vite command.
I merely want to integrate it, like an npm package, and run the vite server as my dev server, which I appear to be doing (see pic) according to the terminal output when I run this script: "start": "npx vite",....
Parent container with overflow not changing height based on child elements
Hello, im trying to make a slider with 4 divs that changes between them. Inside of these divs there are 4 other divs which should contain an image and some text. I managed to do the script and to change them between them.
But i have a problem with overflow, the main container doesn't change it's height in anyway. I want it to change its height responsive to the child elements and remove the Y scroll. I tryed to use overflow-x and overflow-y auto but nothing. Maybe if i put some screenshoots it will be easier to understand. Only way to change its height is if i expresively write it. If i remove the height it should nothing. How does this annoy me? I want to use it on a homepage as a last uploaded products that shows the last 16 products. I could put a bigger height, but depending on the title text from the database it may overflow or look bad....
Dipslay issue
Hi team,
i want to center logo but i get the below error
The browser says: The display: block property prevents align-items from having an effect. Try setting display to something other than block
if you have any solution for this issue...
How can I reproduce this design (frontendmentor.io)
Hello, I'm doing a frontendmentor's challenge, and I have difficulties with the circle in the background. I have the full circle as a svg, I've tried to place it as a background-image and position it with background-position but it's not really responsive. Does anyone has an idea ?
react.js + mapbox directions api integration
how to give hardcoded start and end locations and get directions ???
How to remove this empty space on right side that comes on scrolling the page up.
I have built this UI clone of X(twitter) by using HTML, CSS and Tailwind CSS.
Here is the link to my website : https://tranquilityseeker-gautam.github.io/X-previously-Twitter_clone/
To view the site : click on details and then click on this unsafe site. I don't know why my browser is displaying my site as dangerous, I am just trying to create a UI clone of twitter homepage.
here are my html and css files : https://github.com/TranquilitySeeker-Gautam/X-previously-Twitter_clone
index.html and input. css ...
border-radius on a border-image with linear-gradient
I have a small question about css that has bothered me for some time now. Does anyone know when it would be possible to have a border-radius on a border-image that is a linear-gradient by any chance?
Repsonsive Table on Mobile - Reorder Layout
CodePen: https://codepen.io/Smgy94/pen/wvOjGyz
Happy Friday everyone!
I'm working on creating a timetable using a <table> for my page....
Better way to return a specific item from json
I just want to return the strings from the definitions.definitions objects... but the way I'm doing it feels kinda not optimized as it is about to become an O(nĀ³). Does anyone know a better way?
Here is the link of the api to understand its structure:
https://api.dictionaryapi.dev/api/v2/entries/en/oi...
How can I make my product items responsive?
Problem:
Cause: I had created a product items list that has made an overflow and I don't know how to size it to where it'll fit within the border.
I've tried display grid and grid-template-column but it still wouldn't work, I'm still kind of new at this and I don't know how to deal with overflow as big as this....
How can I make something pop out when I hover over it?
I created a group of containers and I wanted to add some more styling to them to make them more unique I wanted to have the container kind of pop out and get closer to the screen I dont really know how to explain it
How can I make these four stack up top one another?
I'll try to explain this to the best of my ability - So I've created four empty containers and I wanted to know if is there a way to make them change so they can stack on each other in one column when the browser screen goes very small?
Nav Bar
Im a little confused as to how the nav bar should be designed semantically. I see some poeple who dont include the header tag and use nav tag instead of the header semantic tag. Then when you button like elements on your nav do they still go within the nav tag or outisde the nav but within the header if that makes sense
Section header SEO
I was wondering about SEO for this particular common section header. You'll see in the smaller font-size (span) it shows "Service Areas" and the bigger font-size (h2) it says "We've got you covered". Now I think from an aesthetic standpoint this looks better, but would google interpret this section as a service area section less than if "Service Areas" was in the h2? I know this is such a minute detail and probably doesn't affect SEO at all but I'm curious on this and others' thoughts.
Outline appearing around svg react-component when transform scaled?
The picture is what I'm seeing in my hover state for this basic <button/> element, which has an svg inside of it.
the button:
```...
Deal with img width and height
Hi everyone!
I've been using width and height attributes on img markups for quite some time now simply because I don't want to get the error in google Lighthouse and to prevent extra CLS. I think it's stupid because I will always have a fixed value for width and height (usualy the actual image dimensions) and then play around with the image in css (most of the times just doing max-width: 100% and height: auto).
How do you guys go with dealing with images width and height? I hate the fact that I'm entering width and height values just to shut up Google but that they are not actually used. I'm developing with templating languages (Shopify Liquid) so my HTML markup has to be versatile. It needs to work for different aspect ratios and not impact negatively the layout shift. In a situation where I will render an image in a section that will change layout based on the viewport, I'm not sure what I should be using as html width and height attributes....
