SCSS, CSS Grid, Flexbox

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @JECagurangan!

  The layout looks great on desktop, but on smaller mobiles the cards overflow the viewport, that's something that I would look at. I'd also try to move from the column to a grid a bit earlier.

  I'd also have a look at whether using <section> element for individual cards is the best choice. A section represents standalone section of a document, I would say that the cards together form a section here, but you may want to look into this more.

  Hope this helps :)

  1

  ---

  

  Jesus Emmanuel E. Cagurangan•70

  @JECaguranganPosted over 3 years ago

  @AgataLiberska

  First of all thank you for the great response! though I don't exactly understand the issue on the mobile view am I supposed to fit them in one view or in a scrollable manner? 😅

  Now that you mentioned it i have always wondered whether to strictly implement the 1440px query for the desktop layout or adjust it depending on the design, I'd surely keep this in mind.

  For the section element, that was me dozing off on semantic HTML lol. I'll try reading some more appropriate markups to use in the future. 😂

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @JECagurangan oh sorry! Of course scrollable, I just meant that they don't quite fit width-wise :) If you check in the device view in dev tools you'll see what I mean or I can send screenshots on Slack :) It looks great on most tbh, it's just the smaller ones, like iphone SE or Galaxy fold (which I actually think is quite wide, but chrome sets it to 280px - I think that's because you can have more than one app open in viewport when it's unfolded).

  Definitely adjust according to the design, and you can modify the design for tablet if there is not one provided and if you think the solution would benefit from it as well.

  0

  

  Jesus Emmanuel E. Cagurangan•70

  @JECaguranganPosted over 3 years ago

  @AgataLiberska I see, I haven't thought that much about devices smaller than 375px. I guess I would need to consider the design for devices with 280px width at least. And creating/modifying a different design for tablet sounds fun I'll give that a shot.

  0