Alpha Video Training
Results 1 to 6 of 6

Thread: Responsive Layout Help

  1. #1
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,803

    Default Responsive Layout Help

    Web-app (mobile responsive) running 5887.

    I have a fairly simple UX with a list control. The client utilizes his desktop most of the time so the list control is wrapped in a container. The container is set to 11in and the list is set to fill that container. The client likes the way it looks.

    Ashampoo_Snap_Sunday, July 21, 2019_13h35m52s_002_.png

    Occasionally the client wants to use his mobile device, typically an iPhone, to use the web app. I created a rule that when the screen size is less than 1024px to make the container wrapping the list set to 100%.

    Ashampoo_Snap_Sunday, July 21, 2019_13h53m42s_004_.png

    My problem is now, on a mobile device, the list extends way off the edge of the screen to some seemingly arbitrary length. I was expecting the list to be 100% of the current screen size.


    How can, should, I be doing this? I'm obviously not doing it right.


    Here is a sample UX for anyone wanting or willing to take a look.

    LIST_CENTERING.a5wcmp
    Mike Brown - Contact Me
    Programmatic Technologies, LLC
    Programmatic-Technologies.com
    Independent Developer & Consultant

  2. #2
    "Certified" Alphaholic glenschild's Avatar
    Real Name
    Glen Schild
    Join Date
    Apr 2000
    Location
    Frome, Somerset, UK
    Posts
    1,507

    Default Re: Responsive Layout Help

    Quote Originally Posted by mikeallenbrown View Post
    Web-app (mobile responsive) running 5887.

    I have a fairly simple UX with a list control. The client utilizes his desktop most of the time so the list control is wrapped in a container. The container is set to 11in and the list is set to fill that container. The client likes the way it looks.

    Ashampoo_Snap_Sunday, July 21, 2019_13h35m52s_002_.png

    Occasionally the client wants to use his mobile device, typically an iPhone, to use the web app. I created a rule that when the screen size is less than 1024px to make the container wrapping the list set to 100%.

    Ashampoo_Snap_Sunday, July 21, 2019_13h53m42s_004_.png

    My problem is now, on a mobile device, the list extends way off the edge of the screen to some seemingly arbitrary length. I was expecting the list to be 100% of the current screen size.


    How can, should, I be doing this? I'm obviously not doing it right.


    Here is a sample UX for anyone wanting or willing to take a look.

    LIST_CENTERING.a5wcmp
    Not sure containers will work, attached is a revision where I have replaced the container with a panel layout LTR with 3 panels, the middle panel set to 11in which gets the required desktop sizing. Changed the responsive check to set that panel to 100% which now works. The only issue I can see is the border lines for the panel cards which I am sure can be hidden with css.
    Attached Files Attached Files
    Glen Schild



    My Blog


  3. #3
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,593

    Default Re: Responsive Layout Help

    I must be missing something on this - just remove the containers - this is the result
    Mobile and Chrome2019-07-22_1555.png
    2019-07-22_1553.png
    2019-07-22_1554.png
    2019-07-22_1554_001.png
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  4. #4
    "Certified" Alphaholic mikeallenbrown's Avatar
    Real Name
    Mike Brown
    Join Date
    Nov 2009
    Location
    United States
    Posts
    1,803

    Default Re: Responsive Layout Help

    Pete, the client wants the desktop version a specific way (first pic I uploaded) and on mobile wants it to fill the screen. He doesn't want the list to fill his desktop monitor because it's quite large.

    Thanks, Glen. I'll give that a look.
    Mike Brown - Contact Me
    Programmatic Technologies, LLC
    Programmatic-Technologies.com
    Independent Developer & Consultant

  5. #5
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,593

    Default Re: Responsive Layout Help

    OK - Even easier
    2019-07-22_2330.png
    2019-07-22_2330_001.png
    2019-07-22_2331.png
    LIST_CENTERING_Peter.zip

    Pay attention to the max-width: 1000px in the Panelcard and the max-width: 990px in the panelheader.
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

  6. #6
    "Certified" Alphaholic peteconway's Avatar
    Real Name
    Peter Conway
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    2,593

    Default Re: Responsive Layout Help

    Did it work for you?
    Insanity: doing the same thing over and over again and expecting different results.
    Albert Einstein, (attributed)
    US (German-born) physicist (1879 - 1955)

Similar Threads

  1. Responsive layout rules issue
    By CharlesParker in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 12-03-2018, 09:59 PM
  2. Responsive Rule Set
    By CharlesParker in forum Mobile & Browser Applications
    Replies: 0
    Last Post: 07-09-2018, 10:53 PM
  3. Responsive Layout & device.isMobile -Question
    By mikeallenbrown in forum Mobile & Browser Applications
    Replies: 3
    Last Post: 05-05-2018, 09:40 AM
  4. Responsive layout question
    By Ronald Anusiewicz in forum Mobile & Browser Applications
    Replies: 7
    Last Post: 04-06-2017, 05:49 PM
  5. Replies: 1
    Last Post: 12-18-2015, 03:52 PM

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
  •