Learn Responsive Web Design by Building a Piano - Step 10

HTML-CSS
1

Tell us what’s happening:
I not understanding the instructions not sure is if it is because my native tongue is spanish

so for what i understand i need to combine * with the 2 pseudo elements that are ::before and ::after and then set the box-sizing to inherit and so i did but it the check in kept rejecting the results below are the few combinations i tried. How do i fix this?

Your code so far

/* file: styles.css */

/* User Editable Region */
//
html {
  box-sizing: inherit;
}

*::before{

}

*::after{

}
//
html {
  box-sizing: border-box;
}
*::before::after{
box-sizing: inherit;
}

//
html {
  box-sizing: border-box;
}

*::before{
box-sizing: inherit;
}

*::after{
box-sizing: inherit;
}
//

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 OPR/97.0.0.0

Challenge: Learn Responsive Web Design by Building a Piano - Step 10

Link to the challenge:

2

nvm is
*, *::before, *::after {
box-sizing: inherit;
}
trick is comma

1 Like
3

I think there is a espanol channel that might be able to give more help.

you use ::before ::after on the selector

eg.

h1::before  {
   content='-'
}

the * is a selector.
it selects the HTML document, so it selects EVERYTHING

you can use it like this:

* {
    background-color: blue;
}

this should get you close enough to get better hints on how to complete the step

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.