Feature Cards using Grid and Flex

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  Hi!

  I can feel the pain in your words, man =)

  But actually you did the desktop part right! For mobile version you doesn't have to change it to flex you can just change grid-template-columns: repeat(3, auto) to grid-template-columns: 1fr (I suggest you to use fr instead of auto but that isn't the matter on this case). To slightly reduce your code you can skip this part:

    .team-builder {
      grid-column: 2;
    }
  
    .karma {
      grid-column: 2;
    }
  

  They'll take their place by themselves. And to answer your question - yeah it's ok to combine different approaches if it helps you to achieve result, just doesn't really necessary here.

  Also you could make color lines with border-top property. It'll be a bit easier =)

  So, congrats with grid practice, glad to see you improve, even if don't fell so =)

  P.S. And I'm really sorry, but there is a list here...

  Marked as helpful

  1

  ---

  

  P

  Andy•140

  @AStombaughPosted 4 months ago

  @Alex-Archer-I Thank you for the feedback as always! I think if I had started with the desktop and started with Grid I would have just ended with that instead of ending up with multiple approaches. I think I just got flustered when I couldn't figure out the desktop layout after finishing the mobile version first.

  When you say list, do you mean the article elements should have been a list instead of articles? I think that probably makes sense since none of the elements were necessarily "individual" but rather a collective, so a list probably would have made more sense >___<

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @AStombaugh

  That nothing more than a lack of practice. If you were more familiar with grid you have noticed it at the start. And, I know, that grid could seems very complex at first, but with practice your brain will obtain autoclick on it =)

  And yes, I was talking about ul - li stuff. They could be an articles, but guess they have to less content to it.

  Oh, can I take advantage of situation and ask you for an advice as someone from a graphic design environment?

  I'm working for test task for web studio with figma template. And the height of the template block is lager than average screen (at least than my screen =)). But it seems to me that the layout assumes the one-screen look. So, the question is - do designers take specific screen sizes into account when preparing layouts? Another words, should I adjust the values or just do as it is?

  0

  

  P

  Andy•140

  @AStombaughPosted 4 months ago

  @Alex-Archer-I When I went to school, I was taught to design at the current average for a phone, tablet, and desktop. We didn't explore much of what happened once it was in the hands of a developer, it was different disciplines. I learned more about dev and artist relationships later on from 3D modeling because a model can't just "look good"; it also has to be able to be rigged, textured, and animated efficiently.

  In my opinion, I think adjusting the values for the sake of functionality is the right approach, based on what I learned when I was getting my last degree.

  (Hopefully that answered your question!)

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @AStombaugh

  3D modeling? Wow, that's so cool! Is it possible to see your works somewhere or you did not work with it outside of school?

  And yeah, you answered my question it some way, thank you! I was trying to look at this from the designer's point of view. But I already try to reduce spaces between elements and now it's all looks too bunchy. So guess I should try to find a compromise.

  (Really, I just don't want them refuse to hire me cos I "can't follow the template" =))

  0

  

  P

  Andy•140

  @AStombaughPosted 4 months ago

  @Alex-Archer-I I decided to pursue the design discipline instead, more stable job market :)

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @AStombaugh

  I see. Still cool nonetheless =) That why I love this place - you can meet so many interesting people with different backgrounds.

  Thanks again =)

  1