Tabbed view with challenging CSS
I need to implement the tabbed view in the attached screenshot. The thing that's hanging me up is how to do the shadow effect. The current design, which is being replaced by this one, has a shadow around the tabs and the tab content that I implemented with the drop-shadow filter (the tabs are actually contained within the content div, and positioned so that they stick up above the div). But the new design only has a shadow around the current tab. Other tabs just appear as text. So I need to figu...
Clever way to use grid instead of position absolute in a common layout pattern
Hey people!
I have this common layout patter that I almost aways create with absolute positioning the image on the right.
But this makes the responsive part of it harder and more verbose, I was wondering if there is some more cleaver way of doing it, maybe with grid?
I can easily position it with grid using something like:
```scss...
how do i put two out of three inputs on the same line?
how do i put two out of three inputs on the same line while the third is on the second one?
codepen:
https://codepen.io/staticoly/pen/dywJxOb (though i don't know how much of a help that would be)...
float: right not working
I tried floating an image to get 2 other elements wrap around it, but that didnt go as planned float: right doesnt work while float left works perfectly.
Heres the codepen: https://codepen.io/staticoly/pen/dywJxOb...
How can I overlap these two images and keep the overlap responsive?
Hi, I am trying to replicate this design with two overlapping images and a vertical caption. The vertical caption should start in line with the bottom of the top-most image.
I have first tried using position: absolute; on the images and setting their heights to 80%. Then setting image one to top: 0; left: 0; and image two to bottom: 0, right: 0;. This worked but wasn't great responsively.
I thought maybe a grid would work better for this, however I'm still having trouble with responsiveness....
stack two images using CSS on mobile screens (solved)
3 days ago I started a Frontend Mentor project and quickly faced the problem found in the title. .
On top of the image cropping and stacking, I need the two images to expand together while not losing aspect ratio (or at the very least, not noticeably losing aspect ratio) and not move away from each other. Additionally, the combined image (or their container) must take up space so that the other elements around it don't overflow it.
My current solution achieves everything but the the phone image is bigger than the background image. It is a cursed piece of code that exploits the poor grid module into giving me a div with a background image (the non-phone image) where I then add an img tag with the phone image. My other attempts at using different position values managed to do the cropping and stacking, but they either had overflow problems or the two images expanded at different rates and moved away from each other. ...
Help me please deploy my FullStack proejct on vercel
I deployed my project to vercel and got 404 NOT FOUND error
I want deploy my React + Vite + TypeScript + express + Node.js porject with frontend on localhost:8000 and backend on localhost:3000 to vercel sucessfuly
I have this folder structure and vercel.json (I know that I need to write functions for my backend endpoints)...
