CSS adjustments (mobile)

jxmot / website_template-no_bootstrap

A simple (yet working) website template. It is repsonsive and has a working menu. It does not use any bootstrap!

MIT License

0 stars 0 forks source link

CSS adjustments (mobile) #19

Open jxmot opened 2 years ago

jxmot commented 2 years ago

A few things do not look right on either Android Chrome or Firefox:

Lightbox:
- caption and prev/next are too close to eachother
- prev/next buttons need to be slightly larger and moved further apart.
Footer:
- "to top" button needs to be resized and or moved.
- "to top" button sometimes changes to "active" (color change) with out any touches directly on it. It seems that the area around it is too large and gets confused by nearby touches and/or upwards swipes.
Theme switch:
- radio buttons are too close and difficult to select.

FireFox: This browser seems to go to great lengths to be "different" when rendering a page with CSS. Even with the use of reseter.css it's not right.

jxmot commented 2 years ago

Update: fixed some, but FF vs CH are different...

Chrome:

Theme switch:
- radio buttons are too close and difficult to select.

Firefox:

Lightbox:
- caption and prev/next are too close to each other: try -
- Smaller font
- Move buttons down
- prev/next buttons need to be slightly smaller and moved further apart.
Footer:
- "to top" button needs to be resized and or moved.

Both:

"to top" button sometimes changes to "active" (color change) with out any touches directly on it. It seems that the area around it is too large and gets confused by nearby touches and/or upwards swipes.
- Theme switch:
radio buttons are too close and difficult to select. try alternate "buttons", perhaps a grid to contain them?

jxmot commented 2 years ago

Investigating methods for determining if the totop button needs sizing and positioning beyond what the CSS provides.

jxmot commented 2 years ago

Made changes in branch 20220323-issues:

Footer - "to top" is adjusted for Firefox mobile

jxmot commented 2 years ago

Made changes in branch 20220323-issues:

Lightbox - for Firefox mobile adjust the prev/next font size and top margin

jxmot commented 2 years ago

Made changes in branch 20220323-issues:

Footer - "totop", adjusted font-size for mobile (0.7em)

jxmot commented 2 years ago

Firefox mobile footer totop - complete

jxmot commented 2 years ago

Made changes in branch 20220323-issues:

added nobs.js:adjustBody(), this adjusts font-size by a percentage. 95% seems to work well.

jxmot commented 2 years ago

Complete in branch 20220323-issues

jxmot commented 2 years ago

Found the likely cause of the Firefox mobile problem:

If the Android system font size has changed (made larger in my case) then Firefox will be affected as well. This is because of a default Accessibility setting that automatically changes the browser font size to match the system setting. Other browsers do not do this, their font size is independent of the system.

jxmot commented 2 years ago

Verify previous comment, if true and there no more issues then disable and/or remove browser detection and CSS adjustment functions.