English subtitles

← Making it fluid - Mobile Web Development

Get Embed Code
4 Languages

Showing Revision 4 created 05/24/2016 by Udacity Robot.

  1. So now that you know how to support the view
  2. port meta, lets poke around in the developer tools to
  3. see what we need to do to fix this page.
  4. Now, the biggest problem here is that the page has
  5. a fixed column width. If I resize the window, you'll
  6. notice the column of text doesn't actually change size, just
  7. margin position. As we mouse around the elements inside the
  8. dev tools, we can pretty quickly find, the first offending element.
  9. This page element here actually has a width set
  10. on it. Let's disable that and see what happens. Well,
  11. it certainly changed things, but I don't think that
  12. it actually improved things very much. Let's keep digging inside
  13. the content and see what we can find. This
  14. wrapper element has a width of 100% already. Which is
  15. good. It means that it's not preventing us from
  16. resizing. But this content element does have a width set
  17. in pixels. Let's disable that. Now as we resize
  18. the page our content is fine but the sidebar is
  19. appearing and disappearing. Sure enough, it has a width set.
  20. If we set its width as a percentage also, now
  21. we're resizing a little bit better. So now let's
  22. go back up to the page, and let's try giving
  23. it a width but let's give it a width in
  24. view port units instead, now our only remaining problem seems
  25. to be that the header is actually not resizing as
  26. we want it to let's go take a look at
  27. the header image again. The image has a max width
  28. set, but not just a width. So, let's set its width.
  29. And now, everything seems to be resizing well. Now, this isn't perfect,
  30. but all that I really wanted to get at was that as you
  31. try to transition pages from fixed layout to fluid layout, The core
  32. things to look for, are fixed pixel sizes and lack of percentage resize.