order-summary-component

Community feedback

• 

  Peter•170

  @PeterJan285Posted almost 3 years ago

  I dont think bg sliding up is such a big deal, i just checked my solution and its the same. You can click /solutions/wall of fame/ then look thru top devs and their solutions, maybe someone managed to fix it

  <i>"done is better than perfect"</i>

  Marked as helpful

  1

  ---

  

  P

  Robert McGovern•1,095

  @tarasisPosted almost 3 years ago

  @PeterJan285 "done is better than perfect" - bingo, something I need to work on myself.

  0

  

  Peter•170

  @PeterJan285Posted almost 3 years ago

  @tarasis indeed, im a cursed perfectionist as well

  0
• 

  P

  Robert McGovern•1,095

  @tarasisPosted almost 3 years ago

  I finished this one earlier this morning (well yesterday), and did exactly what you mention I have a main section, to which I set the background-image (using a variable with the url), no-repeat and then used a media query to change the value of the variable for the other image.

  https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj/hub/responsive-order-summary-component-using-clamp-Z0PfvSIH1

  Or specifically the code I used was ...

  main {
      background-image: var(--page-background-img);
      background-repeat: no-repeat;
      min-height: 100%;
  
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  
  

  From https://github.com/tarasis/tarasis.github.io/blob/main/FrontendMentor/newbie/order-summary-component/css/style.css

  Note the SVGs are fixed size (unusually), so you want the media query at 376 to switch between mobile / desktop versions.

  Marked as helpful

  0
• 

  P

  Jessica•880

  @perezjprz19Posted almost 3 years ago

  Hi!

  I don't know about more elegant, I used two different media queries for the background and mine is actually a bit jumpy when it resizes. I need to go back to this later anyway, maybe I'll address it then. Let me know if you find a better solution!

  You can see my solution here: https://www.frontendmentor.io/solutions/order-summary-component-using-flexbox-5UlxZi3Kt

  0