Minor changes to stylesheet to work better with landscape mode on default kindle web browser

[fvillanustre]

I made minor modifications to the cascading stylesheet file to make the screen fit on the vanilla web browser in landscape mode, in case people don't have a jailbroken device to install a special browser. In essence, I moved forecast and update a bit to the right and everything a bit up, so that words are not cut at the left and the bottom. Everything fits nicely now.

The resulting kindle.css file (in case you want to provide this to others) is:

html, body { height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }

a { color: #000000; background: #ffffff; }

.night a { color: #ffffff; background: #000000; }

html.night { color: #ffffff; background: #000000; }

cleaner {

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;

}

page {

position: relative;
height: 100%;
overflow: hidden;

}

city {

font-size: 50px;
font-size: 7rem;
position: absolute;
top: 1.5%;
right: 3.3%;
display: block;
text-decoration: none;

}

temp {

font-size: 200px;
font-size: 28rem;
display: inline-block;

}

.tempWrapper { position: absolute; right: 3.3%; top: 10%; }

lastUpdate {

font-size: 10px;
font-size: 1.4rem;
position: absolute;
bottom: 51%;
left: 4.3%;

}

description {

position: absolute;
right: 3.3%;
bottom: 50%;
font-size: 50px;
font-size: 7rem;
text-align: right;

}

icon {

font-size: 250px;
font-size: 35rem;

}

iconWrapper {

position: absolute;
left: 5%;
top: 8.5%;

}

.forecast { position: absolute; width: 100%; bottom: 10%; left: 2.3%; border-top: 5px solid black; border-bottom: 1px solid black; height: 39%; }

.night .forecast { border-color: #ffffff; }

.col { width: 24.5%; border-right: 1px solid black; float: left; text-align: center; height: 100%; overflow: hidden; }

.night .col { border-color: #ffffff; }

.col:last-child { border-right: none; }

date {

position: absolute;
bottom: 3%;
left: 3.3%;
font-size: 30px;
font-size: 4.3rem;

}

sun {

position: absolute;
bottom: 3%;
right: 3.3%;
font-size: 30px;
font-size: 4.3rem;

}

.forecastIconWrapper { font-size: 100px; font-size: 14.2rem; }

.colTemp { font-size: 50px; font-size: 7.1rem; }

.colTime { font-size: 35px; font-size: 5rem; margin-top: 5%; }

.colDesc { font-size: 20px; font-size: 2.8rem; }

.portrait .col:nth-last-child(2) { border-right: none; }

.portrait .col5 { display: none; }

.landscape #city { font-size: 35.4px; font-size: 7rem; }

.landscape #temp { font-size: 141.7px; font-size: 28rem; }

.landscape #lastUpdate { font-size: 7.1px; font-size: 1.4rem; }

.landscape #description { font-size: 35.4px; font-size: 7rem; }

.landscape #icon { font-size: 177.1px; font-size: 35rem; } .landscape #date { font-size: 21.8px; font-size: 4.3rem; }

.landscape #sun { font-size: 21.8px; font-size: 4.3rem; }

.landscape .forecastIconWrapper { font-size: 71.9px; font-size: 14.2rem; }

.landscape .colTemp { font-size: 35.9px; font-size: 7.1rem; }

.landscape .colTime { font-size: 25.3px; font-size: 5rem; }

.landscape .colDesc { font-size: 14.2px; font-size: 2.8rem; }

.landscape .col { width: 19.5%; }

[matopeto]

Thank you, i will check it and test it.... someday, because i don't have a time yet. But again thanks.

What Kindle do you have?

[fvillanustre]

Kindle basic 11th gen (2022), with the latest official firmware and not jailbroken. I assume quite a few people have that one, since it was on sale last year for less than $50 just before it was released. The link to the product is: https://www.amazon.com/kindle-the-lightest-and-most-compact-kindle/dp/B09SWW583J.

[matopeto]

Ok thank you. I have only PW3 to check, but i will check

Can you please provide screenshot before and after the new css you provided

[fvillanustre]

This is after (before it was trimming the forecast and updates on the left side and only showing the top half of the date and sunrise/sunset information (trimming at the bottom by the scroll bar). The layout is set to lr (the usb connector towards the left of the device):

Now, as you can see, the centering is perfect, without any need for scrolling.

[matopeto]

OK thank you. Problem is/was because "new" browser (after some update) viewport is wrong (see the scrolls bar) This happends also on empty page

[fvillanustre]

Yes, I know. And I could not find a way to disable the scroll bar, nor to make the browser fullscreen, so I opted for the next best option. On portrait, that scroll bar on the right bothers me; on landscape right mode, though, I don't mind that bar at the bottom of the screen, as long as it doesn't cover any text. So between moving the elements on the screen up and right and disabling the automatic sleep function, I'm a happy camper now.