We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

What CSS code do i insert to increase tile size?

  • 6 replies
  • 2 have this problem
  • 3 views
  • Last reply by paulri

more options

I'd like to insert some CSS code to increase the size of my tiles. My current setup is attached. I'd like to keep the 5x3 grid, but increase each tile so that it covers up more of the margin, and also so that the scrollbar is no longer necessary.

What code can I insert to do this?

I'd like to insert some CSS code to increase the size of my tiles. My current setup is attached. I'd like to keep the 5x3 grid, but increase each tile so that it covers up more of the margin, and also so that the scrollbar is no longer necessary. What code can I insert to do this?
Attached screenshots

Chosen solution

This will help shrink the side and bottom margins:

  .newtab-side-margin, #newtab-margin-bottom {
    -moz-box-flex:unset !important;
  }

Not sure whether that will completely solve the problem, it depends on your display, zoom level, etc.

Read this answer in context 👍 1

All Replies (6)

more options

Chosen Solution

This will help shrink the side and bottom margins:

  .newtab-side-margin, #newtab-margin-bottom {
    -moz-box-flex:unset !important;
  }

Not sure whether that will completely solve the problem, it depends on your display, zoom level, etc.

more options

Thanks. That is an improvement. My zoom is 100%; my screen is 1366x768 (recommended).

The scrollbar is gone, and the tiles are bigger.

There is absolutely no margin on the bottom, and a good 1.5-2 inches along the top. Is there a code for centering the tiles vertically (so as to take away some of the top margin, and increase the bottom margin a bit)?

more options

By the way--how do you learn about css code? Is there a css site, like htmlgoodies, that walks you through what you want to do?

more options

You can also inspect this file via the location/address bar to see some CSS rules.

  • chrome://browser/content/newtab/newTab.css

You can find this URL in the page source.

  • Firefox > Web Developer > Page Source
  • Tools > Web Developer > Page Source (Ctrl+U)
  • right-click on a web page and select View Page Source in the context menu

You can also use the built-in Inspector on the DOM Inspector to inspect elements.

more options

You can discover the selectors for the margin areas by using right-click > Inspect Element(Q) but knowing what to do about the proprietary -moz-box-flex property that sizes the margin is harder to figure out. MDN is a good resource:

https://developer.mozilla.org/docs/Web/CSS/-moz-box-flex

In this case, I was playing with the rule in Stylish and it suggested "unset" on its drop-down of options. I think 0 would work just as well.

more options

that chrome://browser/content/newtab/newTab.css link looks rather helpful. That gives me quite a bit to play around with.

I'll tinker with the code samples there and report back with any questions/problems.

Thanks a lot to you both.