Create a Design System with CSS - Web Development Course
video description
Date: 2022-03-14
Related videos
Comments and reviews: 10
Drakan21
For anyone who may run into an issue with the _-destination-_ images in the coding part (i.e. Moon/Mars/Europa/Titan);
A CSS rule added much earlier (in the CSS-reset segment) is interfering with visibility for _hidden_ elements.
In your CSS look for:
_
img, picture -
....
display: block;
-
_
Change this rule to:
_
img:not([hidden]), picture:not([hidden]) -
....
display: block;
-
_
This happens because the _-display-_ CSS property -_overrides_- the inherent HTML _hidden_ attribute. So if the root element has any _-display-_ value set in its CSS stylesheets, it ignores the _-hidden-_ HTML attribute completely, and your images will always be visible.
reply
For anyone who may run into an issue with the _-destination-_ images in the coding part (i.e. Moon/Mars/Europa/Titan);
A CSS rule added much earlier (in the CSS-reset segment) is interfering with visibility for _hidden_ elements.
In your CSS look for:
_
img, picture -
....
display: block;
-
_
Change this rule to:
_
img:not([hidden]), picture:not([hidden]) -
....
display: block;
-
_
This happens because the _-display-_ CSS property -_overrides_- the inherent HTML _hidden_ attribute. So if the root element has any _-display-_ value set in its CSS stylesheets, it ignores the _-hidden-_ HTML attribute completely, and your images will always be visible.
reply
TheTrumpetist27
At 1:43:43 I got a very weird bug or something, and I really can't figure it out because it doesnt sound logical to me.
So I got those hover and focus properties setup just as in the video, but for some odd reason, my :hover is not working. but my :focus is working but only when I check focus in the inspector and not when I tab towards it. I really cannot figure thisone out and I did everything exactly as kevin did it. pls help if someone knows whatsup.
edit: My active class is working btw. Its just the hover for some reason.
reply
At 1:43:43 I got a very weird bug or something, and I really can't figure it out because it doesnt sound logical to me.
So I got those hover and focus properties setup just as in the video, but for some odd reason, my :hover is not working. but my :focus is working but only when I check focus in the inspector and not when I tab towards it. I really cannot figure thisone out and I did everything exactly as kevin did it. pls help if someone knows whatsup.
edit: My active class is working btw. Its just the hover for some reason.
reply
faty
HELP CAN SOMEONE HELP ME PLEASE why my button is not a perfect circle at 1:22:53 , i am getting an ellipse instead , in the html page as he has done i have added a flex class inside the div
.flex --
display: flex;-
gap: var(--gap, 1rem);-
-
.large-button --
display: grid;-
place-items: center;-
padding: 0 2em;-
border-radius: 50%;-
aspect-ratio: 1;-
text-decoration: none;-
-
reply
HELP CAN SOMEONE HELP ME PLEASE why my button is not a perfect circle at 1:22:53 , i am getting an ellipse instead , in the html page as he has done i have added a flex class inside the div
.flex --
display: flex;-
gap: var(--gap, 1rem);-
-
.large-button --
display: grid;-
place-items: center;-
padding: 0 2em;-
border-radius: 50%;-
aspect-ratio: 1;-
text-decoration: none;-
-
reply
faty
hi, does anyone is using vscode and having problems to have the gradation of the colors when he uses / .25 or /.50 like in here at 1:57:06 because when i write this lines of coding the dots doesn't change of color and they stay all white please help!!!!!!!:
.dot-indicators > [aria-selected=-true-] --
background-color: hsl( var(--clr-white) / .25);-
-
reply
hi, does anyone is using vscode and having problems to have the gradation of the colors when he uses / .25 or /.50 like in here at 1:57:06 because when i write this lines of coding the dots doesn't change of color and they stay all white please help!!!!!!!:
.dot-indicators > [aria-selected=-true-] --
background-color: hsl( var(--clr-white) / .25);-
-
reply
darin
Wow Thanks for this lovely tutorial. Really appreciate it . Have a question why are we no reseting padding to 0 in body and other elements. we are resetting the margin only to 0. Please let me know why are we doing this
reply
Wow Thanks for this lovely tutorial. Really appreciate it . Have a question why are we no reseting padding to 0 in body and other elements. we are resetting the margin only to 0. Please let me know why are we doing this
reply
Stephen
anyone else having issues with the .underline-indicators > -:hover ? the focus works fine, but hover does nothing in both Chrome and Firefox. can't figure out what might be causing it
reply
anyone else having issues with the .underline-indicators > -:hover ? the focus works fine, but hover does nothing in both Chrome and Firefox. can't figure out what might be causing it
reply
Theena
An actual craftsmen of rare gifts is teaching you his ways and secrets, and on demand. What a time to be a live. Thank you Kevin, FCC, and Scrimba for putting this together.
reply
An actual craftsmen of rare gifts is teaching you his ways and secrets, and on demand. What a time to be a live. Thank you Kevin, FCC, and Scrimba for putting this together.
reply
Hans
this is the first course on youtube that cover so much things on all frontend really amazing the teacher Kevin love it and thanks so much for this excited video course!
reply
this is the first course on youtube that cover so much things on all frontend really amazing the teacher Kevin love it and thanks so much for this excited video course!
reply
Sebastian
the thing with the -::after and -::befor box-sizing i didn't quite understand the explanation. can someone please write something about it or send a link? THX
reply
the thing with the -::after and -::befor box-sizing i didn't quite understand the explanation. can someone please write something about it or send a link? THX
reply
Good
great job, i started enjoying and understanding javascript when i joined Scrimba. After subscribing for their front end development course, i got the best.
reply
great job, i started enjoying and understanding javascript when i joined Scrimba. After subscribing for their front end development course, i got the best.
reply
Add a review, comment
Other channel videos
