Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Търсене в помощните статии

Избягвайте измамите при поддръжката. Никога няма да ви помолим да се обадите или изпратите SMS на телефонен номер или да споделите лична информация. Моля, докладвайте подозрителна активност на "Докладване за злоупотреба".

Научете повече

What CSS code do i insert to increase tile size?

  • 6 отговора
  • 2 имат този проблем
  • 3 изгледи
  • Последен отговор от 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.