Designed using grid and also pseudo-elements for the box-shadows

Community feedback

• 

  Jacek•95

  @sab0taszPosted over 3 years ago

  Hi! Great job on this challenge.

  Could you send me the blog post about box-shadows? I was doing this challenge yesterday, had similar problem and couldn't find solution anywhere. I'd really appreciate the link.

  Speaking of your challenge. When the card becomes a column, I would suggest setting max-width on the whole container, now it looks too wide imo. Rest of the project is looking really well. Maybe I'd throw some hover effect on the button.

  Keep up the good work! ;)

  1

  ---

  

  Justin•165

  @DeusMalsithPosted over 3 years ago

  @sab0tasz Here is the link to the blogpost: https://blog.dudak.me/2014/css-shadows-under-adjacent-elements/

  Yeah when it comes to these newbie challenges I've only been focusing on the optimized resolutions that they have you focus on (mainly because these are components and not actual websites). On the harder challenges I plan on making sure to optimize tablet sizes as well (not sure if those challenges ever focus on the tablet resolutions).

  I could (and probably should) make sure those intermediary resolutions looks good but eehhhhh I'm lazy haha.

  I actually was going to add a hover effect but totally forgot! >.<

  1

  

  Justin•165

  @DeusMalsithPosted over 3 years ago

  @sab0tasz So I checked out your implementation of the box-shadow and yours is actually better implemented than mine. Mine is way more complex than needed because my initialization of CSS Grid needed to be one element higher likes yours. You use the body as a grid simply just to center while I use my grid with a margin to center (can't add box shadows that way because the shadow wants to adhere to the margins). So while the outcome is the same yours is simpler.

  0

  

  Jacek•95

  @sab0taszPosted over 3 years ago

  As far as I can tell, you get only two widths in your styleguide. However I once've received an advice that the design should look well on every possible device, not at the ones provided in the challenge. I am lazy as well :D but why not practice with not so difficult stuff, it would possibly make our lifes easier with more difficult projects ;)

  0

  

  Jacek•95

  @sab0taszPosted over 3 years ago

  @DeusMalsith However mine still needs some work, cause the shadow occupies whole container, while it seems like it's only needed on left, right and bottom side. This is where I got stuck :/

  0

  

  Justin•165

  @DeusMalsithPosted over 3 years ago

  @sab0tasz Delete both of your box-shadow rules and add this: box-shadow: 0px 9px 20px 5px rgb(0 0 0 / 12%);

  0

  

  Jacek•95

  @sab0taszPosted over 3 years ago

  @DeusMalsith I am getting error

  Compilation Error
  Error: Function rgb is missing argument $green.
          on line 2 of sass/d:\single-price-grid-component-master\sass\main.scss
  >>     box-shadow: 10px 9px 20px 5px rgb(0 0 0 0 / 12%);
  

  0

  

  Justin•165

  @DeusMalsithPosted over 3 years ago

  @sab0tasz Ah okay you're using SASS.

  Check out the comment section here. There seems to be a solution: https://github.com/sass/node-sass/issues/2251

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  For the box-shadow, I believe an easier way to do this is to simply add another wrapper/container div around your three containers, and apply both the border-radius and box-shadow to that. (Here's an example - please ignore the fact that I used flexbox instead of grid. This was many moons ago. 😅 🤦‍♀️)

  0