Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

problem of height of div take heigh independent to his content

i have container with grid display and row and colm change depend on data getted and i map list of card product to show all is ok but card product have 2 div first box contain the iage and the second box have 100px height fixed my problem when i have slow server i see secondtbox render first and th rest not show after th image was loaded how to make the first box take the rest of heigh of card without wainting loading picture i try heigh 100% and minheight calc(100%-100px) but not work...

Help with an animation in tailwind.

The first website ectogasm is inspiration . I have been trying to do that navbar animation on my website with tailwind . Help regarding this would be much appreciated. I am providing the code below.

Get the image under the text

Hi guys, i want my image under the text on smaller devices. Now the image dissapears when i make the screen smaller. Whats going wrong or can i do better https://codepen.io/Boeroe/pen/wvNdKQM...

Autocomplete Input Bar

How to make this in MERN stack ? Does this use Google API ( which I don't want cause it ask for billing after certain months ). Or is there any other alternative present...
No description

Adding several different custom woff to css

What would be the code to add 5 different custom web fonts in CSS? I have spent all day trying to figure out how to add different custom fonts to the code. Nothing seems to work....

Section Size is not Perfect

Hello Developers , So i have a Product slider but it's not looking good at all so I'm gonna send the code to you guy's if anyone knows how to fix it i will be so thankful for that...

grid with alternate number of items row

I got a UI design acutally from a printing press, there is a section, with multiple items and they are arranged like 3 items in odd rows, and 4 items in even rows: i.e. 3 in first row 4 in second row 3 in third row and so on...
No description

Odd question about real life problems and Front-end

Currently going through Front-End Mentor projects and doing just the free stuff. They give you usually font size 16, and some colors. I notice a lot of times colors are missing, and obviously one font size is not true. This leads to the images of the layout incredibly hard to match up and not knowing if it is how its suppose to be. Is this common for real life front end developers working for a company? I'm guessing for freelancer more so yes, since more than likely you are also the designer?...

Vertically aligning a floated element to the bottom of its container

I have the <img/> element floated right, and the text is wrapping as I want. But now the image wants to remain at the top. I want the image to always be aligned vertically to the bottom of the container (.main_1_aboutUs) Is there any possible way to also get the img to also align to the bottom of the container in addition to being floated? Position absolute w/ 'bottom: 0' ruins the float, as would making the container display:flex or grid....
No description

clip-path Why does it work? 🤔

Hi everybody. I'm very happy to reah the community. I have a question about the clip-path property. I have succeeded in managing what I want but I don't understand why it works! Find below the codepen link:...

b1, can't use animate inside an each block?

🤣 ```js <ul> {#each todos as todo, index}...

Website looks different in responsive mode than in real device

Hi, as a title says the website looks perfectly fine when you launch it on PC and look at the responsive mode, but on my phone there is a little gap, like 10-15px in the hero section between <div class= 'container'> and <section class='contact__section'>. Also, when you click the hamburger menu the button with text "KONTAKT" has some padding, on the real device there's 0 padding from bottom. Why does that happen? How should I solve this and how to make websites for the future? Thanks for help. Github: https://github.com/Jakub-Gryczka/pomoc_drogowa live-page: https://jakub-gryczka.github.io/pomoc_drogowa/...
No description

Scrollbar Effect!

Hello guys, I have a question searched for it and unfortunately could not find the answer! Here i have the page scrollbar, how i can get the content behind the scrollbar (the scroll bar is transparent) as example the green thing is part of background image, i want the scrollbar to be on the background image as well as shows part of it through its transparency . Thanks in advance!...
No description

Masking divs to a background image of its container?

Hi everyone! I have been racking my brain trying to figure out a way to implement this. I know of masking but I am not sure at all how to even begin something like this. I tried playing around with code pens that I have found using keywords but I have had no luck trying to achieve what I am looking to do. This is just a concept idea, but I figure a visual would help. I attached two images to this that capture exactly what I am trying to do. I wish I had code already but I have no idea. I threw this together in photoshop with the initial blue boxes representing the four child elements. The second image just shows that only the background shows for the children elements, and it is ideally fixed to that background so they aren't all taking on that background. My thought is the child elements are transparent background, so they show the parent element's background, but the parent background only displays where those elements are in the viewport, similar to how text masking is, but for divs....
No description

Feedback on responsiviness and javascript use

Hello, I almost finisch a FEM challenge and I wonder how I can improve the responiviness and my javascript. And of course semantic html it is about a form that needs to be validated....

Can you provide guidance on setting up a container that uses an SVG in a different shape?

Hi , i was figuring this out how i can make this container with different shaped svg on left corner can anyone help me how i can do need some kind of reference or any articles which can demonstrate this kind of structure ?...
No description

How to setup the initial layout on a page - where do I put containers?

If you were building a layout from scratch, how would you do it, and where would you put containers? THAT is my biggest hurdle with CSS, can never seem to get it right. ```js <main> <div class="main-wrapper">...

how to fix background breaking

this is my portfolio. i made a absolute background in a self closing div inside a section set to relative, and the background is banding and new lines are forming ever since . can someone help me fix this?
No description