Nader• 300
@youtubbeh
Submitted
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?
Najm Iqbal
@najjy001
All comments
- Najm Iqbal• 60
@najjy001
Posted
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-Rosemond
Submitted
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?
Najm Iqbal• 60@najjy001
Posted
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
