Help/Assessment wanted for Advanced Styling 1

MDN Learn
, ,
#1

Hi there,

Hope you’re well :+1:

I’d like a review of my markup for Advanced form styling 1 skill test. Codepen here.

I struggled with completing requirement 6 of this assignment and kind of had to find my own way to a solution. The marking docs state we should apply the following css to insert the magnifying glass icon but it did not work for me:

div {
  width: 36px;
  height: 24px;
  background: url(search-24px.png) no-repeat center;
  background-size: 18px;
}

I tried using ::before and ::after on the <button> and <div> selectors respectively but it still didn’t render correctly on screen.

Are there any previous css declarations that prevented me from adding the generated content in the way proposed above? Anything else that would be the issue?

Thank you in advance :smiley:

#2

Nicely done @Phil_G! :medal_sports:

  • When using prefixed and non-prefixed props you should always put the prefixed one first. This way when the browser finally supports the non-prefixed version it will overwrite the prefixed one.
  • You don’t need the flex-direction on the button, because the button isn’t a flex container.

Have you used this exact code? The URL with just the file name doesn’t work with CodePen because the code expects the image to be in the same folder. You need the full path from GitHub to make it work: https://raw.githubusercontent.com/mdn/learning-area/main/html/forms/tasks/advanced-styling/search-24px.png.

See you,
Michael

1 Like
#3

@mikoMK thanks as always for feedback and guidance!
I did get to it being a path issue but disregarded it too quickly, must have been staring at the CSS for too long so ended up overcomplicating the issue at hand :smiley: :man_facepalming:.

2 Likes