[smartly] Amazon Fire HD 7 - larger zoomed calibration

Continuing the discussion from [RELEASE] smartly v1.06 - custom icons, thermostat re-design, custom dashboard link labels and icons:

A full screen browser is very important in order to use the calibration feature. My fireHD7 is 820x480 when using a full screen browser, so the stock viewport dimensions are 820x480, which is what I have in the database. It appears you have your tablet mounted vertically, so yes, it'll calibrate based on 480px wide, but you'd like everything a bit larger. For that, we'll just have to take the CSS smartly generates and bump up the zoom. I also created custom calibration CSS for 671px in case you want to mount it the other way at some point and are unable to find a browser capable of full screen mode in Android 4.3.

Paste the following into the very end of 'Settings' > 'Advanced' > 'CSS' after /* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */

@media screen and (max-width: 673px) and (min-width: 669px) and (orientation: landscape) {
    .dashboard {
        zoom: 1.095;
        -moz-transform: scale(1.095);

@media screen and (orientation: portrait) and (max-width:481px) and (min-width:479px){ 

This is what it'll look like. If this works for you, remove whatever you've put in 'Calibrate my dashboard' in smartly and use this CSS instead.

Is putting zoom control into the smartly web page on the roadmap or is this likely to be a long-term solution?

That would require JS and not currently in the roadmap. It's possible we'll add a 'larger' calibration for a few devices like this one.

Could you please go to https://whatismyviewport.com on your hd7 in whatever orientation and in whatever browser you're using? I'd like to make sure you have some CSS to bump up the zoom like in the above screenshots/pics.

I added it to the very end (see 1st screenshot below) but got an error when I tried to save:

Unexpected token @ in JSON at position 46429

And the added text got removed. (See 2nd screenshot below)

Settings > Advanced > CSS

You are trying to paste into the wrong page. Make sure to click CSS then scroll to the bottom then paste and save. :+1:

Edit: I'm excited to see the result!

1 Like

Yup... I was pasting it in the wrong place. Thanks!!!

Here is the end result (note that I had previously adjusted the button sizes... I would put them back to their original values to see the difference, but can’t recall what they were...)

(My apologies for it being on its side... There seem to be issues with downloading pictures from the iPhone/iPad...)

Nice! Run your JSON through smartly and it'll set all values back to 'recommended' settings.

Well, as it happens, I still had the Smartly tab open , so it was super easy to get the original code back! :smiley: That said, Glad to know I can just add the code in!

Now for the less fun part... I restored the JSON and applied the code to the CSS and now I get:


I’m sure I must have missed something... It looked normal on my PC screen...

It looks better, but the size is still off:


I'll PM you.

Just for future, the user started by making all of their tiles 2x, 3x, 4x wide and various heights before trying to use this CSS. This 'larger' calibration for Fire HD 7 is to display 2x columns wide, so if you are looking to have tiles display larger on this device (or any device 480px wide) you'll want most tiles to be 1x width using standard smartly grid settings. :v:

1 Like