Closed Bug 1196002 Opened 9 years ago Closed 9 years ago

Improve tablet view of /firefox/tiles/

Categories

(www.mozilla.org :: Pages & Content, defect)

Production
defect
Not set
minor

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.
Whiteboard: [good first bug][kb=1826390]
Hi Jon,
 I am interested to fix this bug. Assign me this bug.
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.
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.
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
I did the necessary changes have a look at above screenshot.
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!
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
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.
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/
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.