Closed
Bug 1196002
Opened 9 years ago
Closed 9 years ago
Improve tablet view of /firefox/tiles/
Categories
(www.mozilla.org :: Pages & Content, defect)
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: jpetto, Assigned: rishiloyola98245, Mentored)
References
()
Details
(Whiteboard: [good first bug][kb=1826390])
Attachments
(4 files)
The responsive tablet view on /firefox/tiles/ currently does not utilize the full available width, resulting in left-offset/skinny content.
Reporter | ||
Updated•9 years ago
|
Whiteboard: [good first bug][kb=1826390]
Reporter | ||
Comment 2•9 years ago
|
||
Hi Rishi - It's all yours. Feel free to reach out if you need help getting bedrock running or submitting a pull request. Thanks!
Assignee: nobody → rishiloyola98245
Mentor: jon
Hi Jon, Have a look at above screenshot I have just resized the tiles. Give me your suggestion.
Reporter | ||
Comment 5•9 years ago
|
||
Hi Rishi - Hm, looks like your screenshot is at the desktop viewport width. This bug is concerned with improving the tablet view, which you can see if you squish your browser down to between 999px and 761px wide. See the first attached screenshot - notice how the headline text is a bit too big, and how the text (and content below) doesn't extend to the right boundary (as defined by "Mozilla" wordmark in the top right). Let me know if you have any more questions. Feel free to continue to attach screenshots for me to check out. Thanks!
Hi Jon, Have a look at above screen shot and give me your suggestion.
Reporter | ||
Comment 8•9 years ago
|
||
Getting a bit closer! Still some unused space on the right side though. I think you'll need to add a couple rules inside the tablet media query [1] for .main-column (to remove the width restriction) and #main-feature h1 (to remove the float and width restriction). Due to image sizes, we shouldn't extend the width of .sidebar beyond the current value of 580px. [1] https://github.com/mozilla/bedrock/blob/master/media/css/firefox/tiles.less#L111
Assignee | ||
Comment 10•9 years ago
|
||
I did the necessary changes have a look at above screenshot.
Reporter | ||
Comment 11•9 years ago
|
||
Looking really good. Only suggestion I have now is to make that <h1> font slightly smaller for tablet. I think 64px (using our .font-size mixin) looks appropriate. After that, I think we're ready for a pull request. Thanks Rishi!
Assignee | ||
Comment 12•9 years ago
|
||
Can you provide me some example related to .font-size mixin ? I think so I can also directly change the font-size of this division - .large h1
Reporter | ||
Comment 13•9 years ago
|
||
Here's an example use of our .font-size mixin: https://github.com/mozilla/bedrock/blob/master/media/css/firefox/tiles.less#L54 Simply pass in the desired pixel value (e.g. .font-size(64px);) and the mixin will generate an equivalent rem value, sending both pixel and rem values into the compiled CSS file.
Comment 14•9 years ago
|
||
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/380edb73a5ff41cf7ca8c8268f6160a774596571 [fix bug 1196002] Improve tablet view on /firefox/tiles/. https://github.com/mozilla/bedrock/commit/686fbed05892e321ae69298fbc48d50b1adaefea Merge pull request #3331 from rishiloyola/Tiles Bug 1196002 - Improve tablet view of /firefox/tiles/
Updated•9 years ago
|
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•