[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...
Github user guozhangwang commented on the issue: https://github.com/apache/kafka-site/pull/92 Merged to asf-site. ---
[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...
Github user furyus commented on the issue: https://github.com/apache/kafka-site/pull/92 Please @ mention me when this gets merged - thanks for your hard work! ---
[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...
Github user manjuapu commented on the issue: https://github.com/apache/kafka-site/pull/92 @derrickdoo I have made changes. Please review and let me know if I need to make any more changes. Thanks!! ---
[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...
Github user derrickdoo commented on the issue: https://github.com/apache/kafka-site/pull/92 @manjuapu to fix the video clipping issue you need to switch over to relative sizing when you viewport gets smaller than the full size embed (525px) + the total left/right padding/margin (20px) on your content area. Here's the CSS you need: ` @media only screen and (max-width: 545px) { .yt_series { width: 100%; } } ` There's also a few more tweaks you should make to get things synced up with the design comps. 1. Remove the default borders on your video embeds: ` .yt_series{ border: none; } ` 2. At 1125px wide, you're folding the video selector items down to just the 1-4 clickable bullets below the video embed. You should center the video and clickable bullets to be consistent with the rest of layout ` @media only screen and (max-width: 1125px) { .yt_series { margin: 0 auto; } .video__list { text-align: center; } } ` Last thing just for readability I'd consider grouping all your media queries together. For instance you're looking for ` @media only screen and (max-width: 1125px) ` In 4 places in style.css. Just group all that stuff up. ---
[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...
Github user manjuapu commented on the issue: https://github.com/apache/kafka-site/pull/92 @derrickdoo I have made changes as per your feedback, but need help with video clipping off. ---
[GitHub] kafka-site issue #92: Redesign of Streams page - includes video & customer l...
Github user derrickdoo commented on the issue: https://github.com/apache/kafka-site/pull/92 @manjuapu I'm running your branch locally and I noticed some layout/display issues that should eb sorted out. DESKTOP: 1. Clipping content on the right at certain browser widths: ![image](https://user-images.githubusercontent.com/271961/31293205-441f64f0-aa8b-11e7-9b5d-ba46ac23d0bb.png) 2. Unnecessary padding appears to the left of the main content area at certain browser widths: ![image](https://user-images.githubusercontent.com/271961/31293400-f18ad66a-aa8b-11e7-893c-51ca2d5b652c.png) 3. Horizontal nav should keep the same color scheme when you vertically scroll down the page. Can you just apply a white background with maybe 10px of padding-bottom to the nav to make it appear as if content is scrolling underneath the nav? ![image](https://user-images.githubusercontent.com/271961/31293485-322a7284-aa8c-11e7-8dd0-7d47fb3880aa.png) MOBILE: 1. Content is getting clipped on mobile ![image](https://user-images.githubusercontent.com/271961/31293522-539e260e-aa8c-11e7-8d6e-e249ffd0a2ba.png) 2. Video embed is getting clipped on mobile ![image](https://user-images.githubusercontent.com/271961/31293592-7fa78c5e-aa8c-11e7-9eed-8e7f1450a51a.png) 3. "write your first app" cta should be at the top of the list ![image](https://user-images.githubusercontent.com/271961/31293652-af2fc02c-aa8c-11e7-83f0-6c30ab473e68.png) 4. (not because of your changes) do you mind reducing the text size for the code examples for mobile ![Uploading image.pngâ¦]() ---