共産主義のト二イ Posts

共産主義のト二イ

•Created by 共産主義のト二イ on 7/21/2024 in #front-end

What image sizes would you choose for a responsive hero image?

Are there any rules or conventions to follow? I am considering using 2560w and 1920w for full HD and QHD screens, but what about sizes below these resolutions? Which sizes should I choose for smaller screens?"

<img
...
srcset="
hero-2560 2560w, 
hero-1920 1920w, 
hero-1400 1400w, 
hero-900 900w
src="hero.webp"
..
>

<img
...
srcset="
hero-2560 2560w, 
hero-1920 1920w, 
hero-1400 1400w, 
hero-900 900w
src="hero.webp"
..
>

4 replies

KPCKevin Powell - Community

•Created by 共産主義のト二イ on 5/30/2024 in #front-end

How to prevent Flickering caused by backdrop-filter:blur() when transforming/moving on ChromeBrowser

For some reason there is no flickering on codepen. Here is my codepen: https://codepen.io/noobcoder137/pen/WNBRMPx Also it works fine on mozilla firefox and OperaGX. I am using Chrome Browser on Mac. Don't know if it's same on windows Chrome.:raisedbrow:

5 replies

KPCKevin Powell - Community

•Created by 共産主義のト二イ on 5/26/2024 in #front-end

Bootstrap offcanvas hides the nav without using overflow:hidden! No x scrollbar! What magic is it?

here is my codepen: https://codepen.io/noobcoder137/pen/BaeLeYK I have checked every possible html element, but there is no overflow: hidden. How does bootstrap hides the nav whithout having an overflow scroll bar?! I need to figure out the magic behind this, pls help me, I've been analyzing the css code for hours.

9 replies

KPCKevin Powell - Community

•Created by 共産主義のト二イ on 5/26/2024 in #front-end

Flex-item with fixed width doesn't shrink in flex-direction:column?! Is it a bug?

here is my codepen: https://codepen.io/noobcoder137/pen/oNRzMaY the flex item shrinks when the direction is set to row, eventho the item has a fixed width size, but it does not shrink when the direction is set to column, is it a bug or just a normal behavior? In any case, this behavior is not documented on developer.mozilla.org according to the documentation on developer.mozilla.org: "The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink."

5 replies

KPCKevin Powell - Community

•Created by 共産主義のト二イ on 3/2/2024 in #front-end

Is it possible to reduce the size of a font-variable.woff2 file?

I have this Montserrat font variable from google fonts api, it has 9 weighs, from 100 to 900, but I only need 3 weights which are 400 500 600, after converting the tiff file to woff2, the file size is now at 120kb (it was 400kb before) which is still too large, I would like to drop the weighs and characters which I dont need to minimize the file as much as possible. I tried fontsquirrel.com, but it removes all the weighs except one…

58 replies

KPCKevin Powell - Community

•Created by 共産主義のト二イ on 11/20/2023 in #front-end

How do I import swiper.js package from node_modules into my main js.file?

6 replies

KPCKevin Powell - Community

•Created by 共産主義のト二イ on 7/11/2023 in #front-end

How do I customize bootstrap‘s $form-validation-state?

16 replies

KPCKevin Powell - Community

•Created by 共産主義のト二イ on 2/11/2023 in #front-end

How to set dynamically 100vh on a section minus the nav above ?

Hey guys, so here is the codepen link https://codepen.io/noobcoder137/pen/VwBozdY; I have a <nav>, <main> and a <section> below other and I want to make my <main> 100vh but minus the <nav> so that I immediately see the next section when I scroll a little bit down. I thought setting the height of <main> to 100dvh but it does not work. The only solution I came up with so far is putting the <nav> inside the <main>, but I don’t want it to be nested.

4 replies

Gaming

Programming