html css

Community feedback

• 

  Manoj Kumar Singh•530

  @manojks092Posted over 3 years ago

  After going through your code, its obvious that you are first developing the desktop view rather mobile view, though its not an issue, but next time try to use mobile-first approach. Now about your issue, absolute or relative units dont have problem at all until you override it in media query, in your code you've specified padding and margins for each column which will be changed as the height or width of the document changes, so rather using padding and margin a lot, try flexbox properties for items. For example : align-items, align-self and justfiy-content. It will be lot easier for you to distribute the items in available space. and after this you can for sure use padding or margin if need. I've submitted the solution for this challenge feel free to give it a try, you can fork if you want. Happy Coding!

  Marked as helpful

  1

  ---

  

  nauski•80

  @nauskiPosted over 3 years ago

  @manojks092 Thank you for the great feedback. I changed everything to relative now but still the same issue, media query doesn't do anything. Now there's also padding and margin only when necessary.

  0

  

  Manoj Kumar Singh•530

  @manojks092Posted over 3 years ago

  @nauski go for flexbox. It'll be less code and much work

  0

  

  nauski•80

  @nauskiPosted over 3 years ago

  @manojks092 It is flexbox :) the main container is a flex-box which alignes the cards in a row and each card is also a flexbox which alignes the card's content in a column. I have zero idea though why the media-query doesn't work.

  0

  

  Manoj Kumar Singh•530

  @manojks092Posted over 3 years ago

  @nauski TLDR; You didnt got my point buddy, here's more detailed explanations: 1) .container { display: flex; min-height: 60vh; width: 40vw; margin: 0 auto; // please remove it and rather use margin : auto; and then set margin-top: 10%; or whatever you need to don't involve margin-bottom border-radius: 20px; }

  2).column { display: flex; flex-direction: column; justify-content: space-around;

  margin-top: 40%;// when you already has set margin-top or margin in container then this margin-top will additionally create more space. no need for it you are already using justify-content :space-around
  width: 30rem;
  padding: 2rem;
  

  } 3).column1 { background-color: #E28525; border-top-left-radius: 20px;

  border-bottom-left-radius: 20px;
  

  //In media query you need write more code over here add border-top-right-radius, border-bottom-right-radius. }

  your media query is working, but you set the breakpoint at 375px so there you just set the flex-direction: column, you need to write more code, in short you've to remove extra spaces like margin etc inside media query, so that it can be aligned. Also its overflowing. so plz make sure the properties you are using what impact does it have on your code, for example when you are using flexbox and distributing the space with justify content then you dont need margins or paddings. Well no offense buddy, but i think you must go through flexbox in more details. The manipulations i mentioned above and after working on your media query(by adding more code for each columns rather just setting the flex-direction :column) your page working much better. So please consider your codes again. Hope this will help you.

  0

  

  nauski•80

  @nauskiPosted over 3 years ago

  @manojks092 Hi, thanks for the great feedback. 1/2 I removed the extra margins. 3. I also remove now all the margins and paddings in the media query. It still doesn't work though, maybe it just doesn't work with this design.

  0
• 

  Ahmed Faisal•5,095

  @afrusselPosted over 3 years ago

  Main container is not center align vertically.

  Marked as helpful

  0
• 

  nauski•80

  @nauskiPosted over 3 years ago

  Hi, thanks for the comment. Unfortunately the media query still doesn't work, not at the end nor at the beginning of the css file. I feel that relative units are much more difficult to use, by using pixel values I usually get what I want, or at least close-ish. :)

  0
• 

  darryncodes•6,370

  @darryncodesPosted over 3 years ago

  Hi Nauski, great effort!

  Try this:

  @media only screen and (max-width: 375px) { .container { flex-direction: column; } }

  Some considerations:

  • you might want to bring the media query in sooner
  • I noticed the buttons are getting squished
  • your border-radius needs to be updated when on mobile view
  • it's worth looking into using relative units not fixed units for responsive design

  0
• 

  nauski•80

  @nauskiPosted over 3 years ago

  Thanks, It's closer to center now.

  0