KPC
Kevin Powell - Community•8mo ago
Hamza Naeem

How to make it?

Hello there, I wanted to clone this page, but I am confused when the user clicks on update information, the other page with multiple fields opened, what it is called? and how to make it. just wanted to know the process, please help me to clarify it. Thanks, Hamza
7 Replies
Mannix
Mannix•8mo ago
modal?
Jochem
Jochem•8mo ago
yes, that's a modal and you generally make them with a dialog element nowadays, using the .showModal() method
Hamza Naeem
Hamza Naeem•8mo ago
ok, thank you I think it is JS stuff, I will see what it is, as I am on HTML CSS right now. Thank you again
Jochem
Jochem•8mo ago
it is, but it's like two lines. Kevin has a video on it somewhere I think, if you search for dialog tag
Hamza Naeem
Hamza Naeem•8mo ago
Ok thank you Thank you so much Modal is workinf but it is stick to top left instead of center https://codepen.io/hamzacodepen951/pen/LYqBgXb check plz it could be cenered using margin: auto; but I see in tutorial that their modal was alredy centered
Mannix
Mannix•8mo ago
don't nuke the margin on the dialog element 
* {
  padding: 0;
  font-family: var(--text-font-family);
}
*:not(dialog) {
  margin: 0;
}
* {
  padding: 0;
  font-family: var(--text-font-family);
}
*:not(dialog) {
  margin: 0;
}
Jochem
Jochem•8mo ago
what Mannix said. Basically, it is centered by default using margin: auto, but using * { margin: 0;} overrides that on dialog. It's part of why I don't like to set margin: 0; on *
Want results from more Discord servers?
Add your server
More Posts
Improve the hero sectionI need to improve the hero section, I feel something is missing or it should be added to the backgroPut text and image side by sideHey, I want the text to be side by side with the image aligned with the nav bar logo. But it seems lscaleX()So I understand how to use the typical css scaleX() but I am wanting to do is confusing. First I wanusing * and box-sizing etc..So I see KP do this ```css *, ::before, ::after { box-sizing: border-box; } * { margin: 0; pimage stretchingi dont want this image to stretch is there a way to prevent it if i only set its width then if heighloop vediohi every one why loop vedio attribute cause high cpu usage how to resolve itBrowser zoom/Screen resolutionThis might be a silly question but does your browser zoom level have to be at 100% when you develop how to go about animating a wave that I can manipulate like a cubic bezierSo you have waves that move horizontally but I want to control the trough and the crest like points Taking in a person's browser zoom into accountOn my laptop i use 125% browser zoom because it looks better based on my laptop screen/aspect ratio npm run compile:sass isn't working. My Node.js version is (v18.17.0). Is the version not compatibleHere is the error file when I try to npm run the script: > natours@1.0.0 compile:sass > node-sass s