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

Favicon Doesn't work

Tried doing this: <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />, doesn't work though and my logo doesn't show up.

How to create flashing lines between grid items?

Hello everyone, I am building a menu component made of square items and I would like to link them with flashing lines, themeselves made of rounds, like a charging bar, one after another, they will be on and off. Do you know if it is possible in CSS? I am using display: grid and I would like to put these lines exactly where my grid lines are going. Which property should I use? Thank you a lot for any advice :)!...

icon svg

i'm trying to learn semantic html and css using frontend challenge. What should html tag should I use for icons that is in svg? Still the <i> tag?
No description

Modern day replacement for<table>

In the good ol' days our site was built around the <table> as it displayed mainly tabular lists of data. If I wanted to replace those tables with something new and funky (just because), should I look at CSS grids or is there something better suited to the job?...

HTML and CSS responsiveness issues using Flexbox

I have a simple HTML and CSS homepage, and I have a div container that uses Flexbox and contains links with pictures, but for some reason, the boxes shrink on the mobile version. Note: I have multiple types of images (svg, png and jpeg) and multiple sizes (since some take less or more space, although they have different sizes, they fit the same visually). ```<div class="links"> <div> <a class="link-text" href="...">...
No description

Trying to get Link to work

Hey everyone, I have been stuck on this annoying issue since yesterday, I want to add Links for my navigation bar but I can't seem to get the path to work. Pretty sure it's an easy fix but I couldn't spot it myself, even tried to put the file in the same directory as the components just to get a result....
No description

Text Causing An Overflow

text still causing an overflow even when I've added 'overflow: hidden; I notice that when I use .mn-pro-ctn{max-width: 100%; flex-wrap: wrap;} for small screens, the text doesn't overflow. the problem is that, I don't want to wrap the cards, I want to display them in an horizontal line then use scroll to view the rest if it overflows the viewport. ```echo '<div class="mn-pro-ctn" id="proContainer">'; foreach($products as $product){ echo '<div class="product-crd">'; echo '<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>'; echo '</div>';...

Put an image in div

HI everyone I realise this...
No description

Gradient isn't smooth

So if you look at the picture I've sent you can notice the gradient having lines throughout it isn't a smooth transition how can I fix this?
No description

Titles, tooltips, and accessibility

I'm working on a multilingual page and where other languages happen I add titles where appropriate like
<span lang="zh-Hant" title="flower in Chinese">花</span>
<span lang="zh-Hant" title="flower in Chinese">花</span>
or
<dt title="Hangeul">Korean</dt>
<dt title="Hangeul">Korean</dt>
. I was finding that the tooltips were taking almost 2 seconds to appear so I wanted to have a more instant notification that help was on the way. I considered colouring the text or add some other visual indicator and may still do that, but I found styling the cursor when the text is hov...

Rotate Hexagons by their centers

So, I managed to build a hexagon with css only, but now, I can't figure out, how i can rotate the hexagon by it's own center. Everything i tried rotates the hexagon by a corner. Here is the code: https://codepen.io/Ionut-Sanda/pen/ZEPjXKp...

A problem I find with Semantic HTML

I am making a dashboard website for a mobile game I enjoy. The problem I encountered with the lack of tags and I end up using too much <section> tags and not everything is a section but without it there is nothing else to use. Sure I use <header>, <nav>, <main>,<footer>, <section> but for example <article> is way too specific it's a dashboard not blog post or a cooking recipe and it doesn't have any headings. So I am wondering there is NO SHOT screen readers gonna use it. And is this even worth learning more, because the more I read it the more divs with class names and comments sounds less complex. ...

font family not working on h1

I'm experiencing a situation where a font family isn't getting applied to a h1 unless I set it on both the parent element of the h1 and the h1. Setting it on only the parent element does not work. I'd think that the h1 would inherit the style of the parent but that's not the case. There isn't any interfering font family styles for the h1. I'm using Brave browser. I've never seen something like this before in CSS and I've been writing CSS for 2 years. It's just very strange. How do I solve this i...

Template for the typical centered layout?

I recall Kevin's responsive course on scrimba or perhaps a video provided a simple template/recipe for those typical website layout which goes like this: 1) header and footer occupy 100% of the viewport width, main meanwhile is centered and occupies only say 80% of the width 2) main also has a max width cap and can't grow beyond say 80rem ...

In need of someone better than me at Grid

Please forgive the rudementary MS Paint drawing (I can do better if it is unclear). I'm doing a tree UI where each node of the tree has an openable drawer. I'd like to have it so that each Red element spans two "rows" but whose width takes up as little room as needed. The Orange and Blue need to split along the gridline at a consistent, but fluid, point, and the blue needs to span both columns, but start after the red....
No description

OverWriting Antd lib styles

using antd tables, which is wrapped in a card component issue - when trying to implement pagination it's not able to be position fixed at the right bottom of the card and becomes scrollable so it moves along with the amount of data increased or reduced ...

Animation on svg icons

Hello coders. Unfortunately I lost too much time on this, and can't figure it out. Given the following codepen:...

Auto-Scaling SVG TEXT ---> beside auto-scaling svg shapes!

Hello world! How can we make the text inside an svg to be scalable in a row, just like other svg, which fit the available width of the whole container and adjust their height to match other elements so they all fit. The text should fit it's "flex area" and the other shapes would need to also fit the width of the full screen, meaning they would get smaller in height if there is a lot of text like in y example: https://codepen.io/Goetzeiscool/pen/YzgjYKW...
No description

using parallax in a grid, is it possible

I have been using grid and trying to apply the parallax effect to the grid. I want to know how to make it work without uysing the postion, absolute