Tip Calculator Challenge

Community feedback

• 

  Jordon Young•120

  @jordon-youngPosted over 2 years ago

  Hi @TSune-web,

  I'm looking at your solution in Firefox Developer Edition and Chrome on Windows. I'm not sure what styling issues you're seeing. On my end, they seem to look and function exactly the same on both browsers.

  1

  ---

  

  TsuneWeb•260

  @TSune-webPosted over 2 years ago

  @jordon-young, thank you for the feedback!

  I just checked it again and, as you said, it seems working on both Chrome and Firefox now.

  When I was comparing the right side of the card component (total results part) in the laptop screen size(1440px), positioning properties for texts and numbers didn't seem to be working correctly and overlapping each other for Firefox. It might've been just my mistake💦

  Thank you!

  0

  

  Jordon Young•120

  @jordon-youngPosted over 2 years ago

  @TSune-web Oh, I see what you're talking about now!

  I don't think this is a browser compatibility issues. I think for some reason Chrome is assuming you wanted your main.card grid columns to be equal, and Firefox isn't making that assumption.

  If I'm reading the documentation correctly, grid-template-areas only sets grid area names. You still have to declare how those rows and columns should be sized with grid-template-rows and grid-template-columns.

  Check out the CSS in the Example (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas#examples)

  Marked as helpful

  1

  

  TsuneWeb•260

  @TSune-webPosted over 2 years ago

  Hi, @jordon-young,

  Is that what it is!? I was initially working on Chrome and didn't notice that I had to explicitly set grid rows and columns.

  Thank you for the information! I'll play around with the grid system and see how they behave differently.

  Happy coding💻

  0