Four Card Section Solution

Community feedback

• 

  bikeinman•1,080

  @BikeInManPosted almost 3 years ago

  There is no more separate coding for mobiles and desktops. That's the beauty of responsive css. Its much simpler than you may be thinking.

  All it needs is changing layouts for different sizes of screens. It is achieved with choosing a screen size ( a break point) where you want a different layout and slightly adjust the layouts.

  For e.g, if you have used grid or flex for desktops, you can change them block for smaller screens, which makes all the elements stack up.

  But it takes time to learn them. I usually start here. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Layout

  But there are plenty of videos and tutorials out there. Good Luck.

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Congratulation complete the challenge: My Suggestion

  Used this code want your card in center position :

  in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

  And frontend mentor challenged in style.readmefile to check to font family given and apply in your challenge; and give the padding & margin main container

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted almost 3 years ago

  Your solution is not responsive on Mobile. So always remember mobile first approach . so try using grid template column 1fr here on mobile and use media quaries E.g @media-screen and (min-width:768px{ .card{ //Responsive function here } }

  To change the layout to this current design Besides good job keep coding👍

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Great work, you can search on how to use media queries to make your design responsive. You can also check out my design

  0