1. REGISTRATION REQUIREMENTS:

    Register with your xenforo.com Username then start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Implemented Responsive Support

Discussion in 'Pickem Closed Suggestions' started by Bob, Jul 12, 2013.

  1. Bob

    Bob Developer Staff Member

    as per title...
     
  2. Bob

    Bob Developer Staff Member

    Pickem is now 100% responsive (see the below screenshot examples).



    leaderboard.PNG


    The NARROW breakpoint uses the Team Abbr for the listing as well as reduces some padding.

    picks_edit.PNG

    picks.PNG

    The Medium breakpoint uses the Team Nickname for the listing

    picks_medium.PNG

    The Wideview and greater uses the Team City and Team Nickname for the listing

    picks_wide.PNG
     
    Regs and wcbryant like this.
  3. Bob

    Bob Developer Staff Member

    I should note that the Team Icon sizes are reduced at the Medium and Narrow break points with max-width and max-height settings so that your ginormous team logos don't break the layouts lol
     
  4. Bob

    Bob Developer Staff Member

    As mentioned above, there are now max-width and max-height settings for Team Logos at each responsive break point. This is to prevent layouts from breaking (specially the narrow view).

    There is now a default max-width: 60px and max-height: 60px for logos on the Manage Your Picks and Edit Picks pages . This still gives a decent sized largish image in desktop mode (as seen below).

    logos-wide.PNG

    At the first responsive break point (wide), the max width and height are decreased to 48x48 (max-width: 48px and max-height: 48px)
    logos-wide-break-point.PNG

    At the next responsive break point (medium), the max width and height are decreased to 32x32 (max-width: 32px and max-height: 32px)
    logos-medium-break-point.PNG

    At the last responsive break point (narrow), the max width and height are decreased to 25x25 (max-width: 25px and max-height: 25px)
    logos-narrow-break-point.PNG
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.