What CSS code do i insert to increase tile size?
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?
Izabrano rješenje
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.
Pročitaj ovaj odgovor u kontekstu 👍 1Svi odgovori (6)
Odabrano rješenje
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.
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)?
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?
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.
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.
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.