KPC

Kevin Powell - Community

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

Join

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

Joachim

7/3/2023

align text and image

Hi all, I'm currently working on the Workit landing page from frontendmentor, and everything is going well so far. However, I'm facing a bit of a challenge with the section that includes the founder's image and text. I'm unsure whether applying margins to align them is a good idea (like I did), as it may not be ideal for responsiveness. Ideally, I want it to resemble the design in the Figma file. There should be a box around the image and text, with the box centered on the page. I've tried placing them in a div, but that hasn't solved the issue yet. ...

serkan

7/3/2023

Scrolling to an element with scrollIntoView or with a #

I first used #'s to scroll but it doesn't center the element and it just stops at the start of element. I need to view the element at center, scrollIntoView works perfectly fine but I don't want to use JavaScript for like this easy task, is it possible with plain CSS and HTML?

saaagarsingh

7/3/2023

Sizing of container on different zoom levels

Hey guys, how can we manage the responsiveness when someone zoom in and out the screen. Is there any calculation or media query for that? #front-end...

_.s3haj._

7/3/2023

Why is it showing null?

Uncaught TypeError: Cannot read properties of null (reading 'innerText') Getting this error, heres the codepen: https://codepen.io/Dhami2009/pen/zYMwpxQ it happens on line 90, when you open the little code icon on top-right, clicking onto section button,after that some prompts come and the error comes on the third prompt....

priceman

7/3/2023

CSS for Unifying Numeric Values

I am almost certain that in one video @Kevin shared a tip for styling numeric values (i.e. money) inside a table column that helped keep the numbers in a more uniform width. I cannot find this for the life of me so I’m reaching out to see if anyone remembers it, and can hopefully point me in the right direction. Thanks in advance....

Khoa

7/3/2023

How do I extract the thumbnail URL from a given URL

so let's say I have like a list. each of them has a url. I want to go through each of them and extract their thumbnail image url to display it. Is this possible?...

Lazy_Joker

7/3/2023

Anyone check my code about Media Quires Mixin in SCSS

I Create this Media Quires Mixin custom. Can anyone check tis code? $breakpoints: ( "sm_phone": 480px, "min_phone": 576px, "phone": 640px,...

Lazy_Joker

7/3/2023

Anyone can check my code about Media Quires Mixin In SCSS

I Create this Media Quires Mixin custom. Can anyone check tis code? $breakpoints: ( "sm_phone": 480px, "min_phone": 576px, "phone": 640px,...

Lazy_Joker

7/3/2023

Anyone give some Guideline Which Css library is better with Next.js

Material UI Next UI Tailwind CSS Bootstrap 5...

Joachim

7/3/2023

text-align vs align-self

Hi I'm playing arround with flex on the project workit landing page from frontendmentor and tried to center the text from the reason section, within the flex container, but that doesn't seem to work it goes good with the titles, but not with the text..? I have applied text-align on the p and now it is centred, but why is that behavior? ...

Å Marlon G

7/3/2023

Writing code convention JS / React?

Hi, again! In the quest to understand syntax better, a quick question. In the example underneath, from codecademy, the function calculating the prime number is underneath the counter function reusing the prime function. In my mind it would make more sense to place the prime function above the counter function since counter uses prime. So why is it underneath? Is this a JS / React convention? ```js...

Manish Karki

7/3/2023

How should I approach coding a figma design ?

I am begginer to front-end field and I recently started converting figma file into code. I write code in HTML, CSS, and JS. My code are always messy I don't know how should I approach to write a clean, and reusable code ?

Gainzzu

7/2/2023

Website posted on github doesn't work properly

Hello everyone, Could anyone explain to me how could I make my website work on github? All the files, imgs, js, styles and so on aren't properly read. Repo: https://github.com/klukas18/makeup-website Live version of the site works fine. Thanks for your time 🙂...

ZeR0ByTe

7/2/2023

How can I center correctly my text or remove th "empty space" of my text?

Hi people, I hope someone can help me with this problem: I would like to center my texts correctly but if you see the image, when I select my text, has an empty space in the bottom, and for that reason is not centered correctly. I tried to use font-size-adjust but I continue with the same problem. Any idea? Maybe is a good idea for a Youtube video @Kevin too 🙂...

zebedee_73

7/2/2023

Transition grid rows

I have just seen your youtube vid 'The simple trick to transition from height 0 to auto with CSS'. I came across this technique by fluke myself some months ago. I was trying to tackle a question on sitepoint. The brief was to create a thumbnail with a title over the top, which when hovered over a description scrolls up. My CSS is intermediate a best, but here is a codepen I created https://codepen.io/rpg2019/pen/VwdEvOb If you are interested and have time, could you refactor it? Or give some pointers on how it could be improved? I am now experimenting with using this technique for a responsive menu....

Pat66

7/2/2023

Animation on a letter

Hi everyone I get a problem with an animation on letter ```html...

loss

7/2/2023

React Ecosystem

Sorry, i asked in the wrong channel before. Can someone give me insights about this and the recommendations? I just found this video and was wondering about how good it actually is to have as a guide. https://www.youtube.com/watch?v=6j9tnGMbm2c...

Tanavast

7/2/2023

Having problems with Astro and tailwind in mobile versions, everything works fine in NextJs though.

Hi guys i just wanted to make a blogging website with Astro and tailwind but iam facing responsive issues and theres nothing that seems wrong to me. https://64a1691304804b49ea0f85df--whimsical-parfait-83a4aa.netlify.app/ This is the link to the website that i am making, on phones there seems to be a responsive issue which is not supposed to be there. Iam guessing it has to do with the fact that astro support with tailwind is not yet 100% there yet, and also i have these changes in my tailwind.config.cjs...

Julia

7/2/2023

Adapting Andy Barefoot's CSS Grid Masonry Layout to Accommodate One Inside the Other

I've been using Andy Barefoot's CSS grid masonry layout that was posted on Medium, and I've gotten this far, but I just can't seem to get it to work for what I want. I'm aware of Masonry.js but I'm wanting to see if it can be done without it first of all. There are no images in this design. Essentially what I want to create is a masonry layout, with another masonry layout inside. I captured a screenshot of what I'm currently working with, and adapted it in Photoshop to what I'm trying to make. I've been perplexed by this for the better part of a day, and I really don't know what else to try, or if I'm missing something obvious, so any help would be appreciated very much!...

Sertaç Sermayan

7/2/2023

Button texts won't allign with each other

As you can see in the pic, option C is slightly leaning on the right (i'm not even sure if others correctly alligned). What's causing this?

Previous Next

Gaming

Programming

Kevin Powell - Community

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

Kevin Powell - Community

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