VinceAggrippino
VinceAggrippino
PostsComments
KPCKevin Powell - Community
Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
I just prefer grid to flexbox for basic centering because its less typing. To me it also seems more logical ... place-items in the center.
20 replies
KPCKevin Powell - Community
Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
You could also set display: grid and place-items: center on .main-container.
20 replies
KPCKevin Powell - Community
Created by RMON on 2/4/2024 in #front-end
How can I center this box I created?
There are lots of ways to center an element. In your case, all you need is margin: auto on .container. Here's how I did it: https://codepen.io/VAggrippino/pen/zYbjmXm I also set a width and height.
20 replies
DDeno
Created by VinceAggrippino on 11/12/2023 in #help
Can I disable deno linting for individual files, or a path?
No description
3 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
The generic troubleshooting instructions are to close the tab, clear the cache and cookies, and reboot the device before trying again. I'm not an iPhone user, so I can't be more specific than that, but google is your friend 😅
22 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
https://vaggrippino.github.io/NZAA/ This took less time than we've already spent switching back and forth between JSFiddle and CodePen. If it doesn't work here, there's definitely something wrong with your phone or maybe iOS Webkit.
22 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
All browsers on iOS use Safari's rendering engine, so the browser version doesn't matter as much there. I think Safari supports all the CSS features you're using, though.
22 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
No description
22 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
Sorry, I thought the file names would come through. I have screenshots with the CodePen Panels, wide and narrow, screenshots with CodePen's full page view, wide and narrow, and a screenshot from my phone. It renders the same everywhere.
22 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
No description
22 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
I didn't use dev tools. I used my Google Pixel 5. I double-checked Chrome's version number, too: 119. I had to copy the code over to CodePen, first. Then the URL I loaded on my phone was the "debug" view.
22 replies
KPCKevin Powell - Community
Created by NZAA on 11/9/2023 in #front-end
No width on my grid
container-type and CSS subgrid are both supported by all major browsers, so that's not an issue: - https://caniuse.com/?search=subgrid - https://caniuse.com/?search=container-type I don't understand the question, though. For me, it renders the same on both desktop and mobile. All the widths are set to 100%. I need to read MDN some more to fully understand your grid-template-columns, but I think it won't allow the columns to be less than 220px wide and it's forced to wrap. So, on a narrow screen, it only fits one column.
22 replies
KPCKevin Powell - Community
Created by CDL on 11/6/2023 in #front-end
Trying to add a checkbox that also line-throughs my list item when completed:true
I might not understand completely. I'm not familiar with Svelte at all. Changing the text decoration for checked items and tracking the state of the checked items seem like completely unrelated things to me. I don't know if it'll help your or not, but I did up a functioning To-Do without a framework. The line-through is handled in CSS like I suggested earlier. The state of the completed items is stored in a global variable like it looks like you're doing. I hope this helps: https://codepen.io/VAggrippino/pen/poGRpvZ
7 replies
KPCKevin Powell - Community
Created by CDL on 11/6/2023 in #front-end
Trying to add a checkbox that also line-throughs my list item when completed:true
That's probably overkill... 
<input type="checkbox" name="milk" id="milk">
<label for="milk">Milk</label>
<input type="checkbox" name="milk" id="milk">
<label for="milk">Milk</label>
input:checked + label {
    text-decoration: line-through;
}
input:checked + label {
    text-decoration: line-through;
}
7 replies
KPCKevin Powell - Community
Created by carl on 11/4/2023 in #front-end
How to fit a background-image in the browser's viewport
You're already using background-size. Consider the keyword values. Do you want it to fit (contain) or be cropped (cover). If you want the background to be stretched, I'm not sure that can be done with a background image. Read the "Intrinsic dimensions and proportions" section. I think you could do pretty well with background-size: cover; background-position: center;
3 replies
KPCKevin Powell - Community
Created by ! nier on 11/2/2023 in #front-end
Flex container issue
I don't think I'd agree that code without media queries is cleaner 😅
16 replies
KPCKevin Powell - Community
Created by ! nier on 11/2/2023 in #front-end
Flex container issue
No description
16 replies
KPCKevin Powell - Community
Created by anon-pradip on 11/2/2023 in #front-end
flickering on hover
No problem, just set the pseudo-element's size and position to be the same as the .floating element: 
.card::after {
  content: '';
  display: block;
  width: 50%;
  height: 50%;

  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}
.card::after {
  content: '';
  display: block;
  width: 50%;
  height: 50%;

  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}
I updated the fiddle.
8 replies
KPCKevin Powell - Community
Created by anon-pradip on 11/2/2023 in #front-end
flickering on hover
When you hover your mouse cursor over .floating, it still counts as hovering over .card because .floating is a child element of .card. This is true even though .floating appears outside of the boundaries of .card (due to the transform property). When .card moves away for the animation, your mouse cursor is no longer hovering over any part of .card so the :hover style is no longer used. Notice that the problem only occurs if you hover over the bottom of the yellow square. If you hover over the top of the yellow square or any part of the red square, there's no problem because the mouse cursor is always hovering over .card. You've got the right idea when you put the animation properties on the parent element, but you broke it when you moved the child element outside of the parent element. To fix it, you need something that the mouse cursor is always over when you want the effect. One way to fix it would be with an invisible pseudo-element: 
.card::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 50px);
}
.card::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 50px);
}
In my fork of your fiddle I tweaked a couple of things, but you can see this solution: https://jsfiddle.net/VAggrippino/2ap0kj5u/
8 replies
KPCKevin Powell - Community
Created by anon-pradip on 11/2/2023 in #front-end
flickering on hover
Since the element with the animation moved, your mouse cursor isn't over it any more. So, it reverted to the style set by the selector without :hover.
8 replies