Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2020-02-29 16:44:20

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,750
Website

Re: [SOLVED] issues with mobile friendly test

One thing I did notice with neme.org on a mobile is that if you wiggle a little left and right with your thumb/finger the whole website shifts, which most sites don’t. So maybe you have something that’s a little wider than 100% or need to limit scroll to vertical only.


TXP Builders – finely-crafted code, design and txp

Offline

#12 2020-02-29 17:31:01

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,760
Website

Re: [SOLVED] issues with mobile friendly test

Hi Julian. I am experiencing it too and trying to find a solution. I’ve made widths to 98% but that did not help.

I am currently also trying to solve an issue appearing on small screens when the title is too long (example: http://www.neme.org/texts/environmental-awareness) where the h1 covers part of the body of the article. I even created a clear both span to no avail.

Although the changes to the previous version of the site are mostly on the templates rather than the styling, I do not remember those bugs then.

I will need to audit the css, something I am dreading as its content grew organically over the past 17 years.


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#13 2020-02-29 17:55:39

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,760
Website

Re: [SOLVED] issues with mobile friendly test

I’ve discovered that Chicago 16b Style used in some pages is one of the causes of the horizontal scrolling. The full url of the citation is supposed to appear at the end of the citation followed by access date in brackets. Some of those urls are long and inflexible and I do not want to shorten them as I do not trust those services.

I started experimenting on breaking this rule and have a clickable text. ‘Accessed’ is one option followed by colon and the accessed date. That is a lot of work so I will be testing it on the example page posted at the beginning of the thread.


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#14 2020-02-29 21:25:32

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,750
Website

Re: [SOLVED] issues with mobile friendly test

colak wrote #322009:

I am currently also trying to solve an issue appearing on small screens when the title is too long (example: http://www.neme.org/texts/environmental-awareness) where the h1 covers part of the body of the article.

For that remove the declaration height: 1em; from this line (I think it’s that line: the version I see online is not the same as the one on GitHub). Maybe you meant to have line-height here instead of height: ?

colak wrote #322010:

I’ve discovered that Chicago 16b Style used in some pages is one of the causes of the horizontal scrolling … Some of those urls are long and inflexible …

You might be able to solve that using word-wrap / word-break. See this article on css-tricks.

colak wrote #322009:

Hi Julian. I am experiencing it too and trying to find a solution. I’ve made widths to 98% but that did not help.

Maybe try this within your mobile width media query:

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

TXP Builders – finely-crafted code, design and txp

Offline

#15 2020-03-01 10:19:10

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,760
Website

Re: [SOLVED] issues with mobile friendly test

Thanks so much Julian, I implemented some of your css recomendations and I’ll have to go back to 100% re widths.

I’m currently working on a report for NeMe, deadline is tonight so I’ll continue with the site tomorrow.


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#16 2020-03-02 08:32:43

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,760
Website

Re: [SOLVED] issues with mobile friendly test

jakob wrote #322016:

For that remove the declaration height: 1em; from this line (I think it’s that line: the version I see online is not the same as the one on GitHub). Maybe you meant to have line-height here instead of height: ?

Indeed. Nice catch! That corrected it

You might be able to solve that using word-wrap / word-break. See this article on css-tricks.

Maybe try this within your mobile width media query:

html, body {...

I think that solved the overflow-x issue but more testing is needed!


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#17 2020-03-04 10:48:01

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,760
Website

Re: [SOLVED] issues with mobile friendly test

Hi all,
apologies for my blindness but I just cannot spot the persistent issue with the horizontal scroll appearing on resolutions below 960 pixels on some pages. Here is a sample url, where I also disabled pat_speeder for the section. It shouldn’t be that hard but it’s been days that I am struggling with it.

I opted not to use

html, body {overflow-x: hidden}
body {position: relative}

as they do not solve the issue, they just hide it.

Last edited by colak (2020-03-04 11:47:42)


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#18 2020-03-04 13:23:30

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,750
Website

Re: [SOLVED] issues with mobile friendly test

Think I may have found the cause but not the resolution. Your tooltips are an actual DOM node (span class="tooltiptext") and they are set to visibility: hidden; when not visible (to sighted readers).

Unlike with display: none;, items with visibility: hidden; still occupy space on the page. On your example page, footnote #2 is right at the edge of the page and the page scrolls horizontally exactly as far as that tooltip box:

Compare this:

with this (scrolled left, e.g. normal window viewport):


TXP Builders – finely-crafted code, design and txp

Offline

#19 2020-03-04 14:11:07

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,760
Website

Re: [SOLVED] issues with mobile friendly test

Thanks so much for checking
good catch but styling .tooltiptext with display: none; has not made the problem disappear yet:( It’s a real itch, that I cannot sooth.


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

#20 2020-03-05 20:01:36

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,760
Website

Re: [SOLVED] issues with mobile friendly test

This is really strange. I am checking the site using ff dev tools where the html and body tags appear to be the only ones exceeding the 100% width. I have no idea why.


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github | Covid-19; a resource
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB