Order Summary Card using HTML and CSS

Community feedback

• 

  Shreyas K R•60

  @ShreykrPosted about 3 years ago

  Hi, I am in the same challenge right now, but am not able to understand the background images we have been given. I see that you have not included the background image in yours, but am trying to add it, and they have given images for Desktop and Mobile screens

  So, is it like we have to detect if the device is a mobile screen and then apply the respective background svg ? Am confused actually

  0

  ---

  

  Gian-Carlo Barreto•10

  @gianbarreto3Posted about 3 years ago

  @Shreykr I didn't even notice that there was a background image. Looks like I am going to need to add it. But to answer your question, seeming we were provided both a mobile and desktop background image, I believe we will have to use the mobile image for smaller screens and the desktop image for larger screens. So your assumption seems to be correct.

  0

  

  Shreyas K R•60

  @ShreykrPosted about 3 years ago

  @gianbarreto3 Yes, so that would require us to detect screen sizes and add background images accordingly?

  I can think of a few ways to go about this since am using react. One would be to get the screen width using either the screen.width or the window.innerWidth and then conditionally (using If-else) load the div elements that add the appropriate background image. The if-else condition could be, say, the screen size you capture is > 480px, then add the desktop SVG, else add the mobile SVG background.

  0