responsive product card using flexbox

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted 12 months ago

  HI

  • when styling , use the mobile first approach, where your first styles should be targetting mobile and the use a media query when necessary using the min-width.
  • after creating your html structure start styling from outside to inside, to enable to create some layouts. Here is what I mean, It is normally said the box model or everything in CSS is a box. Since you are starting from outside, which is the body:

  1. Do you have a box or boxes? This is important to determine the max-width of your container. For simplicity , let us remove the footer element from the code altogether so that we have one box (the main) remaining. What we are saying here is that , the body element has one child main element. Then , how does this box (main) relates to the body in mobile view, tablet , desktop view etc? Points to bear in mind are as follows:

  • They should be some space between the body and its child - we can add padding: 1rem to the body. That will always guarantee a space of 1rem regardless of whatever device you are using
  • What is the maximum width the main container should grow to. Yes using max-width is responsive , than using width . Lets give the main element a max-width: 64rem (note - this is a random figure , use the design to get the actual max value).
  • as for centering, we have flex to use to our advantage on the body. Right , check the responsiveness and presentation of the main element using Devtools or on actual devices.

  this declaration on images is usually enough:

  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  

  0