Responsive data storage component ui with html and css

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Degoke! 👋

  Good work on this challenge! Your solution looks good! 👍

  In addition to artimys' suggestions, I suggest,

  • Centering the content of the page within the screen at all times (currently, it seems to move around a bit when the page is resized). You can easily do that, though, with flexbox (or auto margins or something).
  • Making sure the background image scales and doesn't distort when the page is resized (you should be able to do that by setting background-size to cover, I think).
  • Giving the options in the left box a hover state might be a nice touch!

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  Degoke•210

  @DegokePosted about 4 years ago

  @ApplePieGiraffe Thank you, ill make the changes

  0
• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  Hi Degoke, it's a good start to the challenge.

  Suggestion #1 - A tip for that pesky white dot:

  Create a div for the white dot and place it inside your div.slider2 container. Give it the same width and height along with padding and background-color.

  Another way to think of the HTML structure for the slider. Play with the styling.

  <div class="slider-track">
     <div class="slider-bar">
        <div class="slider-dot"></div>
     </div>
  </div>
  

  Suggestion #2:

  The down triangle separates from the white popup at 841px width. Try moving your div.down-arrow inside your div.popup container. Make the down arrow position: absolute, parent container position: relative and play with positioning.

  Hope it helps and keep it up. 👍 👍

  2

  ---

  

  Degoke•210

  @DegokePosted about 4 years ago

  @artimys wow thank you, this helps

  1