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

Print CSS only showing the first page

Hello, I am trying to write some SCSS for printing the screen in A4 landscape that retains a lot of the on screen styles. I kind of have this working with the following SCSS. However, whilst print preview shows there are 20+ pages, the first page is just repeated over and over. i.e. page two is never shown. I'm afraid I can not attached the pdf as it contains commercially sensitive information, I hoping the above explains the situation sufficiently. Here is my current SCSS....

div h-full takes parent height even if there is a sibling in the same div TailwindCSS

Problem: My div containing my text content overflows its parent whit full height Desired: The height of the div containing text content to fill the rest of available height of its parent Code: https://stackblitz.com/edit/web-platform-7gwuv1?file=index.html...

Build failed due to import error

Build failed due to import error After running the build command for my react app the build failed and the below is the response I get. ```Creating an optimized production build... Failed to compile....

Trying to align the "Check it out" links to the bottom of each card by default

Haven't touched CSS in a few months so I'm super rusty, but decided to work on my portfolio a little bit more.. I'm wanting to have the 3 links sit at the bottom of the card, and really, any future links to sit there too. They all have the class of "project-link" and the below CSS is what has been input so far for the projects section ```.projects { background-color: #E4E8FF; background-size: cover;...

interSectionObserver

Is there anything else like intersectionObserver but for elements like intersectionObserver is to observer whether an element is inside the viewport or not but is there anything else that can observe whether an element is inside another element or not...

Font-size CSS

how can i use the min and max function in font-size css i want to in 1200px font-size get 60px and less than 1200px font-size get 40px

Basic Turnstile question

If anyone has used it before, have you come across it intermittently rendering?

I want to change the point of rotation of a div. How to do that?

Basically I want to create something like a disco lights. I have a triangle which i want to rotate but its rotational point should be fixed at the top. I tried transform-origin but that is not giving me the expected results. I have a code pen. Please let me know how this can be done. https://codepen.io/kashyaprajan11/pen/xxaVbYw?editors=1100...

How do I get these linear-gradient? (Header BG and Inside of the circle with number)

my codepen: https://codepen.io/DovahTheKiin/pen/oNPxgWx I'm having trouble matching those linear gradients. All the colors needed are in codepen css named "gradient"....

How can I stop a parent from growing when font size increases?

I've figured out how to make my navbar links to grow in size when hovered or focused on, but the other navbar links shift right and the navbar gets too tall when the font size increases. How can I do this? Thanks

What If...

What if I do, ```js setInterval( () => { setTimeOut( () => {...

Shouldn’t the border radius which is set as “border-radius: 100vmax;”change when viewport changes?

1. Picutre is the button in smaller frame. But it stays stable. How? Did I miss anything? Kevin's code: https://github.com/kevin-powell/fem-manage-landing-page-part-4 2. Kevin’s twet: “Something like 100vmax border-radius for pill shapes, or 100vmax box-shadows that will take up the entire viewport with no overflow issues…”...

Auto select country flag when country code is provided

I am working on a project and it is required I implement a functionality that allow users to provide their phone number in an input tag with the country code and immediately the country code is provided then the flag of the country appears respectively. Is there a library I can use to achieve this or an API?...

Change bg color for the mobile version

Hi, it's about this page: https://www.ohvaz.ro/blog/budinca-de-chia-tot-ce-trebuie-sa-stii/ the mobile version. I wanna remove some of the padding so people can have an easier time reading it. Trouble is - I have this grey/pink background color. I'd like to remove it, BUT only for the mobile version and only for the blog. Not for the rest of the website. I'm a beginner. How can I achieve that with minimal changes? Thank you!...

Web Relationship Sketch.

Hello Can I ask what is Website Relationship Sketch? I am only familiar with Website sketch which is the wireframe.

How to create a layout where parent height = height of smallest child?

I have a div with display flex which contains 2 children side by side, I want the children to be of same height but the one which is larger should be scrollable. In this sandbox example I want the blue to be the same height as red but should be scrollable. This is just a basic example the real case why I need is because on the left I have a form and on the right I have a list of products and then the list is much larger to avoid scrolling the whole page I want to scroll just the element https://codesandbox.io/s/immutable-pine-bzio8k?file=/index.html...

Optional Grid Column Track

Is there a way to have a grid column only included if there's room? https://codepen.io/ascentcreative/pen/XWPXmoQ I have a main content div and sidebar - basic example......

height 100vh problem on page load

Hey there. I have encountered a problem with height 100vh (svh etc.) On mobile device. (I have no idea why on an old phone it works how it supposed to). After I hit enter when entering IP address it looks like that and when I move screen it fixes everything...