Fylo data storage component (HTML, CSS, JS)

Community feedback

• 

  Shashi Lo•1,345

  @shashiloPosted over 4 years ago

  Hey Basak. I do see more than just responsive issues, but this was a great try. All the elements are used and there just needs to be some cleanup in your code. Here are the things that can improved:

  • They way you're using position: relative and moving the sections is very difficult when it comes to making it fluid. It makes it difficult to be responsive.
  • I would wrap the sections in a .container with a max-width.
  • Remove the set heights from the sections and allow the design to be fluid.
  • Instead of using max-width for your media query, build mobile first. Your default CSS styles are for mobile and use min-width to override styles for larger screens as needed. This is a good article talking about current media queries. http://devfacts.com/media-queries-breakpoints-2020/

  3
• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 4 years ago

  Hi Basak, that particular line is actually the culprit. All the code under max-width: 375px will only be applied if the screen width is less or equal to 375px. Once it hits 376px and up, your project will take the desktop styles declared on top of your CSS file. Maybe you meant min-width: 375px? Or a higher breakpoint such as max-width: 768px. Let me know if this helps.

  1

  ---

  

  Basak ulcay•110

  @basakulcayPosted over 4 years ago

  Hi, I meant all the code below max-width: 375px to be applied only when the screen size smaller than 375px. My problem is with the full size screen, all looks fine but once I slowly start to decrease the screen width, it gets out of order (example: the box on the right appears on top on the left one). How can I make sure they stay side by side all the times? And the boxes for Fylo and Data Usage also changes size at the screen gets smaller so they are always visible?

  0
• 

  Roman Filenko•3,335

  @rfilenkoPosted over 4 years ago

  Hi, just use flexbox or grid for layout, this way it will be much easier to put elements into right spots, including resposivness.

  Keep coding, Roman

  0
• 

  Moses Umuomo•105

  @MosesUmuomoPosted over 4 years ago

  I think you should change the 375px to 320px

  0