3 column preview card

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  Hello @Goat3ggs!

  Your project looks great!

  The content is cut off at the top on mobile version because you set place-content: center; to it. This is not a problem for the destktop version, since the card should be in the middle of the page.

  You can fix that by adding place-content: center; only for the destktop version. You can use media queries for that. Do this:

  • First, remove place-content: center; from the body.

  • Then add place-content: center; to the body's @media: 600px.

  By doing that, it'll only work for the desktop version, and your mobile version won't be cut off anymore.

  I have one more suggestion for you:

  • Consider increasing your @media breakpoint. Between 600px and 800px the card gets squeezed. Maybe increase it to 900px or so.

  I hope it helps!

  Other than that, you did a great job!

  Marked as helpful

  1

  ---

  

  Stefania•130

  @Goat3ggsPosted 11 months ago

  @danielmrz-dev Thank you so much! I wouldn't have figured out the solution in a thousand years. I am at the beginning, so it is not so easy for me to find solutions for the problems I encounter. I fully appreciate your help.

  1

  

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  @Goat3ggs

  That's what we are here for! Help each other 😊 I'm glad I could help!

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello!

  The issue you're experiencing with the content being cut off at the top on mobile screens may be related to the way you've set the height of the html and body elements. While setting height: 100%; is a common practice and even comes by default in some CSS resets, on smaller screens like mobile devices, the content can often exceed 100% of the screen. Also, the place-content: center; is centering the element perfectly within its screen (That's why you will always see the SUVs section in the center.), but to achieve this, the component gets pushed upwards. This is why you may see content cut off at the top.

  To address this, consider using min-height: 100vh; instead. This allows the body element to grow in height, adapting to the content. You can also explore using dynamic viewport units for a responsive solution.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  0

  ---

  

  Stefania•130

  @Goat3ggsPosted 11 months ago

  @MelvinAguilar Yes it is very useful and I appreciate that you had the time to help me. It is a solution that I wouldn't never thought of. Thank you!

  1