Screen formatting

I designed a couple of panels on my laptop and are using a fire hd 8 for my tablet. I get everything laid out in my laptop but it looks totally different on tablet.

@Devin_Morell thanks for posting!

The tiles on SharpTools dashboards will automatically reflow based on the screen width. If you’re looking to have tiles line up a certain way on a certain device, we recommend designing the dashboard for your target device size.

The most common approaches for designing for a specific tablet size are to either:

  1. Keep the physical tablet nearby as you’re designing - each time you save your dashboard changes, they’ll instantly be pushed to the tablet
  2. Simulate the tablet’s browser size by either manually adjusting your browser window or using the Chrome Developer Tools

As noted in this post, if the devices are really close in size sometimes you can adjust the tile size to a custom size that makes the tiles scale just right to layout the same on both devices.

The last approach that some people use is to use the scaling feature native to your browser. For example, in Fully Kiosk Browser (which is commonly used on Fire Tablets), you can use the ‘Initial Scale’ setting to scale things up and down to reuse a dashboard with the same ratio - there are trade-offs with this approach though.

1 Like

I just did a quick test and it looks like the Fire HD 8 fits 5 tiles wide and 3 tiles high with the default Tile Size.

If you adjust the Tile Size to Small (120px) and the spacing/gutter to 5px you can fit 7 tiles wide by 4 high on a Fire HD 8.

1 Like

I tried that and this is what I got. The first pic is my laptop and second is fire hd 8


Thanks for sharing the screenshots. I should have mentioned that if the Chrome Device Emulator doesn’t already have your device listed, you would need to manually add it using the effective device resolution.

One thing to keep in mind is that the effective device resolution is different than the physical resolution typically reported in device technical specs as most devices use some sort of scaling. The easiest way to figure this out is to go to https://whatismyresolution.com from your target device and it should show the effective resolution. In the case of the Fire HD 8 it’s 962x601. :smiley:

Imgur

Or you can do it the hard way...

If you prefer doing things the hard way, you can usually look up the resolution and calculate the effective resolution. For example, there’s a table in the Screen Layout and Resolution | Fire Tablets article by Amazon where they report that the Fire HD 8 has a screen resolution of 1280x800 and a scale factor of 1.33.

So to get the effective screen resolution, you would divide the physical resolution by the scale factor. Eg. 1280 / 1.33 = 962 and 800 / 1.33 = 601… giving you an effective screen resolution of 962x601.

So in your custom device profile in Chrome Device Emulator, you would enter something like the following:

Add a Custom Profile
image

Filled in with Fire HD 8 details
image

How do I get rid of the blue header

You can add ?kiosk=true in the end of url or click on ... of the desired dashboard in the dashboard list, and select "View (Kiosk Mode).
image

1 Like

Josh and James. Thanks for your help. Everything worked fine.

2 Likes