SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting height in responsive design?

    Small question. I'm trying out responsive design to create a site that will work on desktops but also potentially phones and such. The basic parts of this design seem to make sense but Im not clear on height. Like I have a logo at the top and then below that is a menu bar. I can't think how to set the height between those as a percentage because the height of the page will vary based on content and so at least to my understanding it seems like it would become potentially stretched vertically.

    Height wise if i want it to be fairly specific should I just be specifying EM?

    Thanks for reading.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It kind of depends on the circumstances. Generally, it's not a good idea to set heights, unless the element is something pretty static like an image. I would say set a pixel height and width for the logo, but leave heights off everything else.

  3. #3
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2yvvs3q.jpg

    Well the context is the above but anything similar to that. Basically if I'm understanding it correctly, were I to set the height of the nav bar to like 6%, then what would happen if the content there was doubled and thus the page was longer? Wouldn't the 6% become significantly larger in proportion even though it is still on the same resolution? It seems like it'd be inconsistent in that regard so I'm wondering if that is how it works and if so what is the best way to handle it. For content obviously the height doesn't matter as that's on the fly anyway.

    But if I say set a specific height for the logo, what would happen if the site was then viewed on a smaller resolution? Will I have to program in different heights for different screen-sizes?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    % height is tricky, because unless the container has a fixed height, a % setting won't do anything anyway. Generally, steer away from % height.

    With the design pictured, I don't think you have to worry too much about these issues. Let the logo and navigation find their own natural height, and they should work fine on all devices.

  5. #5
    SitePoint Zealot darkwarrior's Avatar
    Join Date
    Dec 2010
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K, thanks for the input guys, it helped make things clearer


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •