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

help

How to make this animation have infinite loop

https://codepen.io/stressunfit/pen/QWzPOMR Right now this animation is rolling back after a iteration. i want it to keep going up without rolling back down....

Combining multiple images into one image using CSS

I need to combine multiple parts of an image join and form the complete image using CSS animation. Please help. Thanks in advance. So each part is a separate image.

Place-items:center not having the desired effect for grid elements

Trying to get better at css and got stuck on some grid funk. I have a grid that has 8 columns. The grid can contain any number of grid items, all which span 2 columns. If there are 4n grid items, they fill out the grid nicely. But if there are less than that, say 2, the grid items arrange themselves starting at the left most side. Looking for a clean solution as place-items:center wasn't the solution. ```css...
No description

visually hidden layout & text in div choice

Hey, i was recently looking at something Andy bell did in a site example and i've got a few questions, i'd appreciate any help with understanding this 👍 - In the code below he uses an h1 for the page title but visually hides it, then has another section with the same title which is the one he styles and adds color to etc. Why do people opt to do this sort of thing/layout? - What is the benefit of putting text between div tags? Is it something people do when working with visually hidden elements or a different thing perhaps? ```html...

How does this accessible navigation work?

Guys, is this accessible navigation "button" difficult to make? It works as follows, when you scroll with TAB, it presents other sections for you to navigate such as, Go to main menu, Go to page content, go to footer
No description

Sticky flickering on Chrome Mobile View

Hello everyone, is there any way to prevent this flickering from occurring when scrolling down using position: sticky? This doesn't happen if I use position: fixed; It doesn't seem to occur on Firefox's mobile view, is this something I should be worried about? Thanks in advance, here is all the css:...

Need FrontEnd Advice

I need some advice, i am working on a frontend of a project, i am using html, css and js for it. The thing is its my first project which involves layouts, responsiveness and js functionality. I am able to design and layout things as required. But the thing is , my css is not the best, in terms of extensibility. I have used flexbox for layouting stuff. I am able to complete a design, but then if i make some changes, multiple things break, so i need to be very careful while changing things....

What is the difference between align-content and align-items?

What is the difference between align-content and align-items?

Advanced background coloring help

My designer gave me a landing page in Figma, and as you can see in the picture, there are seemingly random opaque/blurred purple blob elements scattered throughout the white background. Any ideas on how to accomplish this with responsiveness in mind? Thanks 🙂...
No description

can you have an if else statement inside this ```style={{ }}```

i was wondering if you can do an if else statement inside
style={{ }}
style={{ }}
, like do this static color in when this happens and do this color when this happens etc
No description

I am stuck on this challenge help me

I have attached event handler to the noOfPeople input and in the event handler I call another function which is called validate field which calls validator on each input and from the validators whcih the validateField calls in the validatorSelectTip function the this keyword refers to undefined. why is that because I have attached the bind keyword when I call the event handler on the "noOfPeople" input. this is the live-site url: https://aemrobe.github.io/Tip-calculator-app-main/ this is the git repo: https://github.com/aemrobe/Tip-calculator-app-main.git...

Change column order in mobile view

Hi, I'm a beginner and I'd like to swap around two columns in the mobile version of this page: https://expertphotoshop.ro/checkout/?add-to-cart=21190 Basically have the "please register" element up and the checklist down. How can I do that with CSS? Thank you! Chris....
No description

Typical starting template for creating a div container on an entire page?

Morning I always mess this up somehow, my typical start is below: ```js...

A question about getting Sass setup

Do you alway install sass when you use it or will it always be stored on your pc? I'm using VSCode. I installed Sass before on a project but it looks like I have to install it again...

Help! How to develop this UI

After working on a whole day I couldn't develop this. It's very complex. This is a React project. Developing these two navigation bars quite difficult. I couldn't imagine how should I develop html structure and how can I achieve this with css. Can anyone give me a guide or a hint, I really appreciate it. 🤗 Live link : https://www.shangri-la.com/en/colombo/shangrila/...
No description

Fancybox alternatives to modals

We currently use an older, free version of Fancybox to load images and forms in modal lightboxes. I was about to be all set to migrate to or program my own non-jquery-dependent solution, aaaaand now we're using pardot forms which are iframes. (Which we hate so much.) Can anyone recommend a good alternative to fancybox that handles images and iframes? The latest v5 of Fancybox seems like it's just a paid license now.

Huge Gap Between Two Lines of <h1> Tag

I am having an issue here with the <h1> tag. I have broken the text so it is split between two lines of text but there is a huge gap between the two and I would like them to be much closer than what they are. Any suggestions on what I can do to make them come closer together?
No description

bootstrap fixed navbar moves on scroll

I have a bootstrap fixe- top navbar on my site. On mobile devices it moves up half its height on scrolling down. It stays on top of everything so when you have slim fingers you can still open the burger, but it looks bad 😦 Any ideas?

How to select specific tags in a tag

I want to make everything in the div uppercase, except the span that has a "k" in it because it's a small k
No description