React Blog preview card

Community feedback

• 

  ricardoychino•190

  @ricardoychinoPosted 3 months ago

  Hi,

  Good job with your solution. I'm dropping here because you'd asked for some feedbacks regarding responsiveness.

  1. The first thing that I would consider is to give more room to breathe to your card. See this image when viewing with a really small viewport - the borders of the card are touching the viewport borders. Design-and-user-experience-wise, it is a good idea to give some room to "breathe". You can accomplish that giving some padding to the parent element. In this case, #backg. Add a tailwind p-{size} class in your case - or just set it manually, your choice. Adding the padding will result in something like this

  2. Then, as devices varies A LOT in terms of width, resolution, OS and etc, and you will want to cover the more you can with less code, it is better to avoid setting a fixed (max or min) width as you did in the element #card. Also, you should remove the media query for max-width: 360px. What I'd do:

  #card {
    width: 384px; // As you specified as max-width in your code
    max-width: 100%; <-- this will ensure that the card won't be 
                         bigger than the available space, 
                         even if it is smaller than the 384px width 
                         we defined
  }
  

  And as for the "available space", it will be the parent size minus its padding, which we defined at item 1. So this will result in the same padding, same behavior for any size of viewport. No need to use media queries!

  You could ask "What's wrong with keeping the media query with width: 90%?"

  Thinking in mobile devices, where the width space is very limited, it is a good idea to set just the needed fixed padding for the "breathe", instead of setting it dynamic and related to the viewport width. If that spacing is dynamic, the space for breathe could be too big or too narrow depending on the size of the viewport. The ideal is to keep the same behavior covering as many sizes possible. Additionally, it is more code that you write that specifies more style than necessary and could impact in future changes in your project, making the maintenance a bit more difficult after a while. Only use media queries when you need a major change in layout, like orientation, positioning, etc.

  P.S.: Since you are using Tailwind, I don't know if you are aware (I apologize if you are, I don't want to sound like a douche), but there's a cool feature in Tailwind to apply media queries directly with prefixes, like md:w-16 for example.

  Marked as helpful

  0

  ---

  

  Tremaine McKinley•40

  @tremckinleyPosted 3 months ago

  @ricardoychino Thanks a lot, I'm all for the feedback so no worries there. I'm learning as I build so all of this information and explanation and detail is helpful!

  1