All comments

• 

  Nader•300

  @youtubbehSubmitted over 2 years ago

  This was kind of a challenge for me. To view the responsive version for mobile, go down to a width of 375px. Any ideas on how to make it better?

  

  Responsive product page for perfume / CSS, HTML, Flexbox

  2

  50
  

  Najm Iqbal•60

  @najjy001Posted over 2 years ago

  I will double down on what lazyDuckling said and suggest that your mobile media query should transition at 640px. In your CSS change

  max/min-width: 376px to max/min-width: 640px

  Instant improvement. For further improvement i would replace .main > width: 350px with 80% (see what value looks good or 100% with margin) and remove the width from .mobile and .text. By doing this when you transition to the mobile view your card will fill the screen and shrink to fit as the screen size get smaller.

  Marked as helpful

  1
• 

  SJ.Rosemond•30

  @S-RosemondSubmitted over 2 years ago

  I found it difficult to figure out the correct spacing and line height despite using Flexbox. I am wondering if there is an easier way/tool to determine the proper values of these properties? Or am I overthinking the spacing is just a bit off?

  

  Fullscreen solution Product preview card

  1

  30
  

  Najm Iqbal•60

  @najjy001Posted over 2 years ago

  I've been using figma to work out spacing you can set up a free account at https://www.figma.com. Create a new template and upload the design images. You can then use the frame tool to create rectangles over the design to almost accurately guestimate sizes of elements and spacing around elements.

  If you need anything more than the frame tool youtube has hundreds of tuts

  0