M Rashaad Hartley
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/13/2024 in #front-end
CSS GRID
The pen you shared back is still side by side for mobile
11 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/13/2024 in #front-end
CSS GRID
Not what I wanted
11 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/13/2024 in #front-end
CSS GRID
11 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/13/2024 in #front-end
CSS GRID
11 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/11/2024 in #front-end
Font Face / Hosting Own Fonts
yeah i think so too, whats your opinion for best practices on the above?
9 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/11/2024 in #front-end
Font Face / Hosting Own Fonts
This is what chatgpt says @clevermissfox lol
9 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/11/2024 in #front-end
Font Face / Hosting Own Fonts
@font-face {
font-family: "Poppins";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/poppins/woff2/poppins-light-webfont.woff2")
format("woff2") 300;
src: url("/assets/fonts/poppins/woff2/poppins-regular-webfont.woff2")
format("woff2") 400;
src: url("/assets/fonts/poppins/woff2/poppins-medium-webfont.woff2")
format("woff2") 500;
src: url("/assets/fonts/poppins/woff2/poppins-semibold-webfont.woff2")
format("woff2") 600;
src: url("/assets/fonts/poppins/woff2/poppins-bold-webfont.woff2")
format("woff2") 700;
}
@font-face {
font-family: "Poppins";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/poppins/woff/poppins-light-webfont.woff")
format("woff") 300;
src: url("/assets/fonts/poppins/woff/poppins-regular-webfont.woff")
format("woff") 400;
src: url("/assets/fonts/poppins/woff/poppins-medium-webfont.woff")
format("woff") 500;
src: url("/assets/fonts/poppins/woff/poppins-semibold-webfont.woff")
format("woff") 600;
src: url("/assets/fonts/poppins/woff/poppins-bold-webfont.woff")
format("woff") 700;
}
@font-face {
font-family: "Roboto";
font-weight: 300, 400, 500, 700;
src: url("/assets/fonts/roboto/woff2/roboto-light-webfont.woff2")
format("woff2") 300;
src: url("/assets/fonts/roboto/woff2/roboto-regular-webfont.woff2")
format("woff2") 400;
src: url("/assets/fonts/roboto/woff2/roboto-medium-webfont.woff2")
format("woff2") 500;
src: url("/assets/fonts/roboto/woff2/roboto-bold-webfont.woff2")
format("woff2") 700;
}
@font-face {
font-family: "Roboto";
font-weight: 300, 400, 500, 700;
src: url("/assets/fonts/roboto/woff/roboto-light-webfont.woff")
format("woff") 300;
src: url("/assets/fonts/roboto/woff/roboto-regular-webfont.woff")
format("woff") 400;
src: url("/assets/fonts/roboto/woff/roboto-medium-webfont.woff")
format("woff") 500;
src: url("/assets/fonts/roboto/woff/roboto-bold-webfont.woff")
format("woff") 700;
}
9 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/11/2024 in #front-end
Font Face / Hosting Own Fonts
Here is how i saw it on Kevins video
@font-face {
font-family: "Roboto";
font-weight: 400;
src: url("/assets/fonts/roboto/woff2/roboto-regular-webfont.woff2")
format("woff2");
src: url("/assets/fonts/roboto/woff/roboto-regular-webfont.woff")
format("woff2");
}
But with this, it is 400 regular, also the url links to the specific 400 font file
If i specify multiple font sizes "font-weight: 300, 400, 500, 600, 700;" like this and not include the specific file in url but link it to the folder like this "/assets/fonts/roboto/woff2/" would it work?
9 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/11/2024 in #front-end
Font Face / Hosting Own Fonts
Would this work fine?
@font-face {
font-family: "Poppins";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/poppins/woff2/") format("woff2");
src: url("/assets/fonts/poppins/woff/") format("woff2");
}
@font-face {
font-family: "Roboto";
font-weight: 300, 400, 500, 600, 700;
src: url("/assets/fonts/roboto/woff2/") format("woff2");
src: url("/assets/fonts/roboto/woff/") format("woff2");
}
9 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/10/2024 in #front-end
@media and EM
Silly mistake, thanks!
7 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/10/2024 in #front-end
@media and EM
Aah shit
7 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/10/2024 in #front-end
@media and EM
what do you mean
7 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/10/2024 in #front-end
@media and EM
When i add the code for the mobile @media it messes up the normal desktop size and tablet sizes, also it does not adjust the size of the mobile.
I watched some of kevins vids and he was doing this, i just used max width instead as I prefer it.
Does anyone know why this happens?
7 replies
KPCKevin Powell - Community
•Created by M Rashaad Hartley on 3/8/2024 in #os-and-tools
VS Code
How?
11 replies