Julianna
KPCKevin Powell - Community
•Created by Julianna on 7/31/2024 in #front-end
Screen Size Warning Modal
Hello everyone, I am working on a website that will be used almost exclusively on ipads, laptops and desktops. I want to at least warn people who go to it on a phone that it's not optimized for mobile devices. I watched a video from Kevin and another one that both used a dialog element when an open button was pressed. I want my warning modal/popup to come up on load or seconds after it but only for users on a phone. So I have media queries setting it to visible or not visible depending on the screen size. I wasn't able to do it with display none/flex because it was messing with my javascript. Now it's fine on mobile, but on larger devices, the invisible modal is blocking me from clicking any links on the nav bar. I'm not sure of the best way to do this, especially in an accessible way. I know I can use z-index with display: grid, but as I mentioned, display was messing with the javascript to open/close it.
Here's a codepen where I reproduced the issue. https://codepen.io/MathematiCode/pen/PorpqGZ
You can see the links can't be clicked at larger screen widths because the invisible modal is in the way.
13 replies
KPCKevin Powell - Community
•Created by Julianna on 7/28/2024 in #os-and-tools
TabWidth in HTML VSCode
So I figured out how to adjust my tab size in prettier in VS code but it only works for JavaScript. I am having a hard time telling apart where each div ends and I would really appreciate a larger tab width in html and css. OR if each div was color coded a different color, that would be great too. I tried to figure out how to make prettier apply to html and css with chatgpt but it had me create a config file and upload it and I tried but I can’t figure out how to upload it or name it correctly.
This is so complicated for something that seems so simple, it’s making me consider switching to a different IDE. I would super appreciate suggestions on how to fix this in VSCode or other IDEs.
16 replies
KPCKevin Powell - Community
•Created by Julianna on 7/20/2024 in #front-end
How can I set an input box to be responsive to user input?
6 replies
KPCKevin Powell - Community
•Created by Julianna on 6/27/2024 in #front-end
Override Default Border on Input
I am working on the tip calculator project on frontendmentor and I've used :hover, :focus and :active to adjust the border color of the custom tip input box but it still defaults to the blue border when I start typing in both chrome and firefox.
Here is my deployed project so far: https://calculate-and-split-tip.netlify.app/
My codebase is here: https://github.com/mathematiCode/Tip-Calculator-FEM
I've tried commenting out all of my js, in devtools it shows that the styles in the :focus, :hover selector are being applied but it keeps changing the color to the default blue when I start typing.
I am using vanilla CSS and JS btw.
12 replies
KPCKevin Powell - Community
•Created by Julianna on 6/25/2024 in #front-end
justify-self and align-self flexbox?
Do justify-self and align-self not work for elements in a flexbox container? I’m finding mixed info and some of it is 8 years old.
10 replies
KPCKevin Powell - Community
•Created by Julianna on 6/20/2024 in #front-end
How to responsively move elements from a row to a column with subgrid?
2 replies