Using Media Queries

Community feedback

• 

  Omar M.•270

  @OmarMAttia7Posted almost 3 years ago

  Congratulations on finishing the challenge 🎉. Good job!

  I'm not entirely sure I got your question right, what exactly do you dislike about the current design? I'm not sure I see a problem here but I'm new to responsive design as well. You shouldn't be concerned with devices smaller than 320px in width, in the rare case someone uses a device like that they could just scroll horizontally.

  I also noticed that you're using exact measurements with pixels, in the case you want to change measurements on different screen widths you should use rems as reference for your measurements and then just changing the font-size of the html element at different media queries and adjusting the font-size of text elements if they get too small or big you could look here for more information on how rem works.

  Also you should turn height: 100vh to min-height: 100vh in your container because it breaks your design on landscape orientation and other small heights.

  Try looking into working with a mobile-first approach to responsive design it could make things clearer for you.

  Marked as helpful

  1

  ---

  

  P

  Daniel•140

  @obriedanPosted almost 3 years ago

  @hazel79 Thanks for your feedback Omar! I don't quite see how using rems in this instance would work.

  Take for instance the H2. The Figma design has a font-size: 28px on desktop and a font-size: 22px on mobile. If I took 1.75rem for the desktop design with an html { font-size: 16px; } I would have to change the font size to 12.571px; on a mobile sized media query to get that same 1.75rem to match. Doing that would break the other font sizes which drop by a smaller percentage.

  Going in the opposite direction and using the media queries to grow the font-sizes ends up with a similar problem.

  Really appreciate your help. This part of responsive design is something I can't get my head around just yet.

  1

  

  Omar M.•270

  @OmarMAttia7Posted almost 3 years ago

  @obriedan I see, so that's what you meant. I'm sorry I didn't understand at first.

  I'm afraid in that case the original design is not maintaining a ratio between different elements of text, that problem is not on your part and I don't know of a solution either. I would ditch getting the design pixel perfect in favor of practicality especially since it's better for accessibility and is less prone to producing janky results at specific widths, by setting a constant ratio or using a method for fluid typography.

  You could check this article and this article for methods to make text fluid and responsive, the first one discusses using using clamp() in it's last section, it could be useful to you.

  Unfortunately there doesn't seem to be a way of getting the sizes exactly right without adding a ton of code and media queries that I know of.

  Marked as helpful

  1

  

  P

  Daniel•140

  @obriedanPosted almost 3 years ago

  @hazel79 Thanks Omar! I think I was super caugh up with getting the screenshot of design / solution pixel perfect that I missed the broader challenge. Will keep that in mind in future. Thanks for those articles!

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Daniel, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • To make it look as close to the design as possible remove picture element
  • For add the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • try to add a little transition on the element with hover effect

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  1
• 

  optimusprime202•1,200

  @optimusprime202Posted almost 3 years ago

  Hey @obriedan, Congratulations, you got it right!

  0