[Solved] Lazarus Website Mobile Friendly

[Martin_fr]

I'll be going through the changes, probably over the weekend.

First glance looks good.

Just a note, IMHO ok if it's no longer the case....

The 3 columns / boxes on the feature page were designed to always have the same height. So the bottom would align.

I know that is untypical for html. It was a heck of a work to make it happen...

Anyway never mind.

Btw, a pre-existing problem, when the width shrinks, before it goes to menu.
The underlines of the links on top, will overlap with the wrapped links below.

No idea if that is easy to solve.

[lainz]

I'll be going through the changes, probably over the weekend.

First glance looks good.

Just a note, IMHO ok if it's no longer the case....

The 3 columns / boxes on the feature page were designed to always have the same height. So the bottom would align.

I know that is untypical for html. It was a heck of a work to make it happen...

Anyway never mind.

Btw, a pre-existing problem, when the width shrinks, before it goes to menu.
The underlines of the links on top, will overlap with the wrapped links below.

No idea if that is easy to solve.

Thanks.

Yes, I've aligned the bottom of the 3 boxes in the features page.

And that problem with the menu, I'm not sure if I understand it I need to test it again.

[Martin_fr]

Another comment I received:

Looks ok on mobile, except that the head of the home page looks misaligned. The image should be centered imo, and the text right aligned.

Also see image.
If the page get narrow, the layout change (text below image) needs to happen sooner.

IMHO the text "Version 2.0.10 for Windows 64 bit | Other" may marginally overlap with the width of the image.
But as soon as the download button starts to overlap (go partly beneath the image), it should change to go all below the image



Older Browsers: I'll check with others how concerned we are.

IE 9 and before do not handle the new page well. Even with wide space, there is only one column.

Same with (old) Safari on windows. https://www.browserling.com/browse/win/7/safari/5.1/http%3A%2F%2Flaztest.martin-friebe.de%2Findex.php%3Fpage%3Dfeatures


In IE11 the 3 feature-boxes have a lot of empty space at the bottom (also when in 1 column mode).

[lainz]

Hi, ok, I don't have too much time to keep trying with older versions of bootstrap to work on ie9.

About the issues, maybe changing the colums to the large version, say instead of col-md-4 we can use col-lg-4 so it resizes better.

I've not touched the header, only made the image responsive if I remember correctly... but I don't know how to fix that. Maybe removing the style, and using a parent 'row' of bootstrap, then using 'col-lg-6' for the image and another 'col-lg-6' for the text and links, so it resizes better. (bootstrap uses a 12 columns system).

[Martin_fr]

The main issue, indeed is the header.

The older browser fall into "would be nice" (well IMHO). After all, its a balance of gain and loss.

About the header: Its currently not half/half in width between image and text. More like the image takes 60% to 70% (right before re-layout is needed). It's a while since I touched bootstrap. But maybe it can be tweaked like that?

[lainz]

It must be something like this

Code: Pascal  [Select][+][-]

1. div class='row' - inside put the two columns
2.   div class='col-md-8' (66%) - inside put the image
3.   div class='col-md-4' (33%) - inside put the links

[lainz]

I think I've fixed it, please test again. I've centered the image and added the columns.

Edit: I did two commits, the first fixes the columns, the second fixes the first fix (it was loosing the background image).

[GAN]

Hi Leandro, in the foot's section there is a button of "ohloh" that does not work: "SSL peer has no certificate for the requested DNS name.

Código de error: SSL_ERROR_UNRECOGNIZED_NAME_ALERT"

I think the correct button and link must be the same of the forum: "openhub".

[Blade]

Microsoft has stated it is ending support for the old Edge browser on March 9, 2021 and for Internet Explorer 11 it appears the date is August 17, 2021.  But the security updates appear they will continue as long as Windows 8.1 and Windows 10 last.

Supporting Internet Explorer 9 seems like it would be stretching it.  Though can understand people wanting consideration for Internet Explorer 11.  However, Microsoft will be pushing their new Edge browser very heavily, so would think only the most hardcore or those relying specifically on legacy web apps they don't want to update, would be clutching on to Internet Explorer 11 to the very end.

[Martin_fr]

Some companies are still stuck on XP, and that is IE 8 afaik.
Though they should know to expect glitches.....

[Martin_fr]

I added a few changes. / Waiting for feedback if it works on Safari

float left/right => improve for IE 9.

Changing when/how the new navbar hides.
- So older browsers see the normal menu bar
- Hides already at witdh 700, because the desktop nav bar wraps to too many lines

Also re-added the image/background in the mobile version

As I said, waiting for some test results. Otherwise IMHO good to go.

If someone wants to add as a bonus: The 8 blocks on the bottom of the main page are spaced with too much distance, if the page width becomes smaller. (needs another media tag, to reduce padding/margin/...)
But its not a problem.

[lainz]

Hi, I've added you to the lazarusccr at github, so you can manage the repository.

I don't have mac / iphone to test on Safari, so I let you find some tester.

Thanks for the fixes.

[Martin_fr]

All changes are now staged at https://test.lazarus-ide.org/

Probably will get them live mid/end of the week.

[trev]

Works perfectly with:

* SeaMonkey on FreeBSD;
* Safari on Mojave;
* Safari on previous model iPhone SE (iOS 13.6.1)

Works "ok" with:

* Safari on iPad - the original site looks better as the banner with the image and download button takes up less than 50% of the depth that the new version takes up and the fonts in the new page are much bigger as well. See: old page and new page. This only seems to happen on the iPad (iPadOS 13.6.1).

[Martin_fr]

* Safari on iPad - the original site looks better as the banner with the image and download button takes up less than 50% of the depth that the new version takes up and the fonts in the new page are much bigger as well. See: old page and new page. This only seems to happen on the iPad (iPadOS 13.6.1).

Do you have some form of "inspect"? So you can disable individual css attributes?

Both the html and the body element have a ton of stuff by bootstrap.
If you can disable them one by one, to see which one (if any) is causing this?