Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive summary card

Victor 290

@cervantesdeveloper

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How do you make responsive text? I mean, do you use a font-size relative to the viewport width like font size: 5vw? or do you set the font size on each brackpoint?

Community feedback

@alisariyer

Posted

Hi Victor,

Nice work. I use this technic for responsive font:

  1. Use a variable as --rem: 1rem in :root or html selector
  2. For any element you can use like: h1: { font-size: calc( var(--rem) * 1.4 ); } p: { font-size: var(--rem);}
  3. In media query: @media (min-width: 576px) { :root{ --rem: 1.1rem; } } So you can use this technic by changing variable value only. I hope it will be useful for you.

Have a nice coding :)

Marked as helpful

1

Victor 290

@cervantesdeveloper

Posted

@alisariyer thanks, it seems complex but practical

0

Account Deleted

Hi there,

  • you actually can do both i personally use breakpoints because i am more used to it
  • add tranistion:1s; to the btn_cta so that when you hover on the button the background changes smoothly
  • check the HTML report to fix accessiblity issues

i hope this is helpful and goodluck!

Marked as helpful

1

Victor 290

@cervantesdeveloper

Posted

@Old1337 Thanks, I didn't consider the transition, I will fix it.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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