搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

What CSS code do i insert to increase tile size?

  • 6 回覆
  • 2 有這個問題
  • 32 次檢視
  • 最近回覆由 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?
附加的畫面擷圖

被選擇的解決方法

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.

從原來的回覆中察看解決方案 👍 1

所有回覆 (6)

more options

選擇的解決方法

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.