{"action":"created","issue":{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2064","labels_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2064/labels{/name}","comments_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2064/comments","events_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2064/events","html_url":"https://github.com/Semantic-Org/Semantic-UI/issues/2064","id":66413901,"number":2064,"title":"Request for responsive views with compact information","user":{"login":"peterfyj","id":1782454,"avatar_url":"https://avatars.githubusercontent.com/u/1782454?v=3","gravatar_id":"","url":"https://api.github.com/users/peterfyj","html_url":"https://github.com/peterfyj","followers_url":"https://api.github.com/users/peterfyj/followers","following_url":"https://api.github.com/users/peterfyj/following{/other_user}","gists_url":"https://api.github.com/users/peterfyj/gists{/gist_id}","starred_url":"https://api.github.com/users/peterfyj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/peterfyj/subscriptions","organizations_url":"https://api.github.com/users/peterfyj/orgs","repos_url":"https://api.github.com/users/peterfyj/repos","events_url":"https://api.github.com/users/peterfyj/events{/privacy}","received_events_url":"https://api.github.com/users/peterfyj/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/labels/Discussion","name":"Discussion","color":"777777"},{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/labels/Enhancement","name":"Enhancement","color":"219a90"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-04-05T07:53:01Z","updated_at":"2015-06-01T10:16:07Z","closed_at":null,"body":"Existing responsive views (such as `Item`, `Card`, `List`) present stackable images on mobile devices, which take most of the screen space. I've always been expecting some responsive view that 1) on mobile devices has a small and fixed image on the left while the compact details are presented on the right. 2) present normal information on pc as existing views do such as `Card`.\r\n\r\nFor mobile websites such as amazon or ebay, I believe it is expected that we could see several items within the screen, while stackable and large images may be helpless."},"comment":{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/comments/107389158","html_url":"https://github.com/Semantic-Org/Semantic-UI/issues/2064#issuecomment-107389158","issue_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI/issues/2064","id":107389158,"user":{"login":"isaacqc","id":1496881,"avatar_url":"https://avatars.githubusercontent.com/u/1496881?v=3","gravatar_id":"","url":"https://api.github.com/users/isaacqc","html_url":"https://github.com/isaacqc","followers_url":"https://api.github.com/users/isaacqc/followers","following_url":"https://api.github.com/users/isaacqc/following{/other_user}","gists_url":"https://api.github.com/users/isaacqc/gists{/gist_id}","starred_url":"https://api.github.com/users/isaacqc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/isaacqc/subscriptions","organizations_url":"https://api.github.com/users/isaacqc/orgs","repos_url":"https://api.github.com/users/isaacqc/repos","events_url":"https://api.github.com/users/isaacqc/events{/privacy}","received_events_url":"https://api.github.com/users/isaacqc/received_events","type":"User","site_admin":false},"created_at":"2015-06-01T10:16:07Z","updated_at":"2015-06-01T10:16:07Z","body":"A temporary workaround is to comment out the following in item.less when building semantic-ui...\r\n\r\n```less\r\n/* Tablet Only */\r\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\r\n  .ui.items > .item {\r\n    margin: @tabletItemSpacing 0em;\r\n  }\r\n  .ui.items > .item > .image:not(.ui) {\r\n    width: @tabletImageWidth;\r\n  }\r\n  .ui.items > .item > .image + .content {\r\n    display: block;\r\n    padding: 0em 0em 0em @tabletContentImageDistance;\r\n  }\r\n\r\n}\r\n\r\n/* Mobily Only */\r\n@media only screen and (max-width: @largestMobileScreen) {\r\n  .ui.items > .item {\r\n    margin: @mobileItemSpacing 0em;\r\n  }\r\n  .ui.items > .item > .image {\r\n    display: block;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n  .ui.items > .item > .image,\r\n  .ui.items > .item > .image > img {\r\n    max-width: 100% !important;\r\n    width: @mobileImageWidth !important;\r\n    max-height: @mobileImageMaxHeight !important;\r\n  }\r\n  .ui.items > .item > .image + .content {\r\n    display: block;\r\n    padding: @mobileContentImageDistance 0em 0em;\r\n  }\r\n\r\n}\r\n```"}}