Css , Flexbox , media query

Community feedback

• 

  P

  Jessica•880

  @perezjprz19

  Posted over 3 years ago

  Hi! @abdellahelaajjouri

  I didn't looked at your code and saw that you added two media queries.

  I started mine mobile first, as you did. However, I only used one media query.

  My process:

  I start the simulation for a very small device, such as the galaxy fold.

  I add all my HTML with semantic tags only adding and only adding divs where needed for styling.

  In the CSS I start working from the inside out, so fonts and colors and then container. I used flex or grid depending on the project to place items within the container.

  I remind myself the browser already has some responsiveness built in.

  I try to avoid using fixed widths as much as possible and don't usually add a height. I use min() and max().

  In responsive mode, I slowly increase my window size adjusting the values for min() max() as I go where needed.

  Then if things start to break I use a media query.

  I remind myself that with the challenges, we don't know how it should look at every size, so long as it still looks nice In the sizes in between, I don't worry too much.

  I don't know how to avoid media queries entirely, and sometimes go media query crazy as I try to patch things up 🤣 but I think my process is helpful most of the time.

  01

  Marked as helpful
• 

  Naveen Gumaste•10,420

  @NaveenGumaste

  Posted over 3 years ago

  Hay ! Good Job Abdellah

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

  Keep up the good work!

  01

  Marked as helpful