Skip to content
Submitted 12 months ago

Base Apparel Page: Responsive Mobile-First (JS + Flexbox&Grid + SCSS)

sass/scss
Mark•210
@Iron-Mark
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Responsiveness Layout

What challenges did you encounter, and how did you overcome them?

Resizing the image in different viewport, affecting the size.

What specific areas of your project would you like help with?

Best way when to use clamp, min-max sizes

Code

Please log in to post a comment

Log in

Community feedback

  • P
    MikDra1•7,470
    @MikDra1

    Best Use Cases for clamp()

    Fluid Typography:

    • Adjusts font sizes dynamically, e.g., font-size: clamp(1rem, 2vw + 1rem, 2.5rem);.

    Responsive Container Widths:

    • Sets a container width that adapts between a minimum and maximum, maintaining usability across devices.

    Element Padding/Margins:

    • Ensures padding or margins adjust responsively without becoming too large or small, e.g., padding: clamp(10px, 2vw, 20px);.

    Button Sizes:

    • Keeps button sizes adaptive, ensuring usability while maintaining design consistency.

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord