Responsive & mobile first & flex

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Rafet! 👋 The design preview for your solution looks great, but when I click on the live preview of your site, the stylesheet doesn't load for some reason. 🤨 You might want to look into that! 😉

  0

  ---

  

  rafet•925

  @rafetbasturkPosted almost 4 years ago

  @ApplePieGiraffe

  Hello! 👋

  While fixing accessibility issue for button, I uploaded wrong index.html file. Thanks for reminding. Waiting for your comment after looking into site preview.

  Happy coding!

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @rafetbasturk

  Yup! There it is! 😄

  I think you've done a pretty good job on this challenge! 🙌 Your CSS illustration looks great! 👍

  I only suggest adding overflow-x: hidden to the body to prevent a horizontal scroll bar from appearing along the bottom of the screen on the desktop and mobile layouts. Also, the text of the messages in the phone is a little small, making it hard to read—making it a little bigger would be nice! 😉

  Of course, keep coding (and happy coding, too)! 😁

  1

  

  rafet•925

  @rafetbasturkPosted almost 4 years ago

  @ApplePieGiraffe

  Hello! 😄

  Thanks for your feedback. I added overflow-x: hidden to the body.

  I have a question about background divs I used with position: absolute. In the larger screens over 1440px, they exceed the body width. What should be done to prevent exceeding the body width?

  Happy coding! 😄

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @rafetbasturk

  Hey, rafet! I think that as long as you add overflow-x: hidden to the body to prevent any horizontal scroll bars, there's nothing wrong with the background shapes exceeding the width of the body (since that is the way they are in the original design). If you'd like, you can try experimenting with positioning the shapes using viewport units so that they more or less remain in their place when the page is resized. 😉 Good luck and have fun! 👍

  0