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

I need to understand grid template rules

```
<div id="container">
<div class="banner"></div>...

How to style the selected option of the dropdown

I'm able to style the options but not the selected option. I've read that this style is inherited from the brower defaults. Can you please help me style the selected option. https://codepen.io/Abdul-Ahad-the-decoder/pen/abMRxZP...

if I say I am a frontend developer, what do you expect from me?

What should I be able to do , what tools should I have in my box , what kind of projects I should be able to make , should I know backend as well?

React

The best react course for free?

Do not want to have deagable funcationlaity in input type range

i want my input type range like when someone will try to drag it . it should not be a dragable . but when someone will clicl on a specific point in input type range it should move to that here is the codepen link"https://codepen.io/Talha-Mustafa/pen/LYagXQJ

How to set border for second grid row ?

So... Is it possible to do it ? ```css grid-template-columns: reepat(5, 1fr); grid-template-rows: repeat(3, 1fr); /* How to add border: 1px solid #000 to the row 2 from first to the last column ? */...

Footer (How to show the footer stick to the bottom (even when the console is opened)

I added the position: fixed and bottom : 0 but then the footer stick to the bottom, but when I open the console, the footer shows on the top of the content - would the better option be adding margin-top or any other suggestions? If I open the console. the content scrolls but the footer shows on the top of the content...

flexbox

In flexbox, whats the difference between setting justify-content to flex-start and start?

dealing with screen resolution

Hello friends I am working on some project, and I was going forward with coding the front-end until I found out that my application is aweful on old monitors with low screen resolution, the fonts the divs gets so bigger and things start to break. Horizontal slides, and many more new problems appeared. I didn't thought of this thing when I first started working on CSS. Is there any helpful tip that I can apply revisiting my CSS?...
No description

I use Flexbox instead of Grid

I am a beginner Frontend Developer and I don't like grid. Even the place where grid can easily handle the work, I tend to use Flexbox and make it complicated. But I am satisfied with the complicated flexbox instead of simple grid. Can any help me here to make me use Grid over Flexbox?

mid-sentence header!

How would folks here approach this and what do you think would be the best way to mark this up? "Try our" is not part of the previous section but "Live Chat" is the title of the component/section it lies within, and so appears after. I've seen some discussions about this online and didn't see much consensus so I think some of this is down to personal preference. I'm inclined to wrap the "title" in a <strong> tag instead of a H3, display it as a block in the hope that screen readers will read accept it as flowing on from the text before. (I'm yet to test this) and then I can put a "visually hidden" H3 before "Try our"... Though this seems to fly in the face of reducing clutter in the code and such....
No description

Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment

My problem comes in two parts, which seem to heavily rely on each other. The first is the vertical alignment problem. My page has a logo and a progress bar below it like so: ```html <section> <img src="logo.svg" id="logo"> <div id="progress-bar"></div>...
No description

Different desktop and mobile version of an image

Anyone knows why it only display the mobile version of the image?
No description

Responsive Image positioning with CSS calc()

` .section-types .type-info .type-image-wrapper { position: absolute; left: calc(100 * 48%/564); width: calc(100 * 280%/564);...

Responsive Image positioning with CSS calc()

If possible can anyone please explain me the below part of the code, when resizing the window this test preview image remains perfectly responsive even it's positioned absolute.it happens with this calc() function calculation. That's what I couldn't understand. `.section-types .type-info .type-image-wrapper { position: absolute; left: calc(100 * 48%/564);...

How to use a grid layout for containers/wrappers but also have a one side bleed?

Following this tutorial about grid layout instead of wrappers from Kevin, I got a grid layout that works nicely with "full-width", "breakouts" and "normal width". The problem is that I'm trying to make a "one-side-full-width", like this other tutorial from Kevin but the content inside of this new class/wrapper is not following the centered layout. Here is a JSFiddle showing the problem....

Cancelling out @media in Wordpress template

Hi! So this is a real nut for me .... I've been asked by my employer to build a schedule and add it to an existing wordpress template. I tried to use WP plugins, but nothing gave me the horisontal scroll I desired....

Best way to animate height increase upwards?

Basically for animation of the element to start from the bottom towards top, instead the default that goes downwards? One solution I saw is to set overflow:hidden; to the body and hide element outside of the viewport, but it creates responsive problems on certain screen sizes....

Media queries

Can someone help me by telling me what is the best way to code for the laptops and the larger screen desktops ?

Height iframe

Hi! First time using iframes. Why does it have vertical scrolling? https://github.com/AMarlonG/Ice-Hot-kode/blob/main/Saturday/index.html...