Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#21 2020-03-06 15:37:10

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,033
Website

Re: [SOLVED] issues with mobile friendly test

I think that have identified the culprits with a sledgehammer.

Using the ff dev tools, I added

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {border:1px solid red;}

at the last line of the media screen and (max-width:960px){ styles in a small stylesheet for logged in users only .

The two elements that apparently exceed the width are the copyright notice with id #searchsites and the header. The problem is that although I am changing those widths, the overflow is persistent and no change is visible in the borders, created by the above css rule. fixed both of them but some pages still have the horizontal scroll, regardless of the borders not exceeding the widest parts of the articles.

Could somebody check the particular elements and recommend a way to fix this? Am I wasting my time on it?

Last edited by colak (2020-03-06 17:32:36)


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

#22 2020-03-07 22:09:14

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

Re: [SOLVED] issues with mobile friendly test

Not sure if you’ve solved this now or not, but I took another look at it by downloading a couple of sample pages and trying to go back to first principles and rebuild your basic layout.

I managed to resolve it by dealing with two aspects: first shift your tooltiptext into a media query so that the styles only apply above 960px. Make the normal state hidden and show only above 960px. Something like this:

.tooltip .tooltiptext {
    display: none;
}
@media screen and (min-width: 960px) {

    .tooltip .tooltiptext {
        display: block;
    }

...

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
}

The second part is the long links in the footnotes. For that try this:

#texts .notes li a {
    ...
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

which should make long links break, if need be in the middle of a word.

I’m not sure if it works exactly with your current css but I can send you my little rebuild exercise. I didn’t do everything, and rebuilt your grid with flex box. I also didn’t take account of old IE.


TXP Builders – finely-crafted code, design and txp

Offline

#23 2020-03-08 06:25:45

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,033
Website

Re: [SOLVED] issues with mobile friendly test

Wow!!! That kind of fixed it. I moved the tooltips in the media query and the horizontal scroll disappeared!

You are also right that their hover no longer works because of my css structure. At least all I need to check now is just that functionality!

What is perplexing to me is why this behaviour did not appear in the previous version of the site.


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

#24 2020-03-08 09:45:27

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

Re: [SOLVED] issues with mobile friendly test

colak wrote #322097:

You are also right that their hover no longer works because of my css structure. At least all I need to check now is just that functionality!

It does work, you just didn’t quite implement it as suggested, so one all-important directive is missing. There’s also a typo that might be confusing the css.

  • Remove the stray } (you have it twice) after the display:none; entry.
  • You can move .tooltip (the wrapper for the footnote number) back outside the media query. You still want that to show on mobile.
  • In .tooltip .tooltiptext inside the media query, you need display: block; to make them show again on desktop view. Without that, the tooltips are still hidden on desktop view.

Wow!!! That kind of fixed it. I moved the tooltips in the media query and the horizontal scroll disappeared!

I was a puzzled too why display:none; didn’t resolve it on its own. I would have thought all other css directives would be invalidated but the tooltips still occupy space. So I turned the principle around and set tooltips not show as “standard” (i.e. mobile) and then all the directives that affect positioning and display only cut in when the viewport is wide enough. On mobile you can still jump back and forth between the text and footnotes.

What is perplexing to me is why this behaviour did not appear in the previous version of the site.

Because your site has been around a long time (17 years – pretty impressive!), you probably added media queries to accommodate smaller display devices at a later stage, so your general principle is desktop display first and media query directives to take care of smaller viewports. I think we pretty much all did that when the responsive options first became available. It works on the whole, but…

… all later changes you make to the css then also affect mobile too unless you take care to check and if necessary reset their behaviour too. That’s one advantage of styling for mobile first: mobile view generally has the least frills, and you then only add special facilities to the higher viewport media queries. The mobile ones remain unaffected.

I can’t say whether that explains why it’s happening now and didn’t before.

The other thing was: I found it hard to find my way around your css and what interacts with what. Again, I guess this is because it has accrued over time (I know this only too well myself), and perhaps also because you have support for old IE versions too (which unless your own visitor stats specifically say otherwise, I think you can jettison in this day and age). In the end I downloaded the source code of two typical layout pages, commented out your css, added normalize.css (= very basic level playing field for cross-browser styles) and main.css from HTML5Boilerplate (a starting point with good style order and standard up-to-date helper classes) and then rebuilt the basic layout bringing in bits of your css where relevant (e.g. tooltips etc.).

If you can stomach offering a less fancy display to earlier versions of IE, you could now switch to flexbox as it is well-supported now everywhere. The 24-col grid css using display:inline(_block) is terribly fussy about white space in the html code. One space can occupy a tiny %-age fraction causing the layout to wrap. You can fiddle with percentages until it works but it’s unreliable and can break when a new space shows up elsewhere in the HTML. I can see you’ve “conquered” that with float:left; a few times, but floating takes the layout elements out of the page flow, so you then need clearfix to restore order. With flexbox or CSS Grid (support is good for all but IE 10/11 and old android) you can do away with all of that. In fact, as far as I can tell from my brief experiment, you’re not really leveraging the whole grid capabilities except for in a few places like the homepage, so you may not really need an all-encompassing grid at all: for the normal pages, for example, you’d be fine with main column + sidebar. CSS, while still frustrating at times, has got so much better over the years that some of the tools that leaned on as a crutch and got used to over the years are no longer really needed.


TXP Builders – finely-crafted code, design and txp

Offline

#25 2020-03-08 16:06:51

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,033
Website

Re: [SOLVED] issues with mobile friendly test

This has been a ride! All issue on mobile devices now appear solved. Thanks so much Julian for all your attention and help!

I do agree with you I will need to start thinking of transitioning the site for mobile first and flex. Because of its size though, it’ll be quite a chore.

I have recently started redesigning my wife’s site and I am going towards that direction.


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

#26 2020-03-08 23:19:13

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,017
Website

Re: [SOLVED] issues with mobile friendly test

colak wrote #322100:

I do agree with you I will need to start thinking of transitioning the site for mobile first and flex. Because of its size though, it’ll be quite a chore.

What I have done for one not-so-small site where the owner only needed modernising the code base (basically like your Nemo) is work with two stylesheets, ‘old’ and ‘new’, and then working through the site section by section. When all was updated, I then flipped a few “flags” in the new stylesheet to apply some final changes (like the base font-size, the old site was using something minuscule). That took some two month of intermittent work.


Where is that emoji for a solar powered submarine when you need it ?

Offline

#27 2020-03-09 04:59:41

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,033
Website

Re: [SOLVED] issues with mobile friendly test

phiw13 wrote #322102:

What I have done for one not-so-small site where the owner only needed modernising the code base (basically like your Nemo) is work with two stylesheets, ‘old’ and ‘new’, and then working through the site section by section. When all was updated, I then flipped a few “flags” in the new stylesheet to apply some final changes (like the base font-size, the old site was using something minuscule). That took some two month of intermittent work.

This is indeed how I have made the first transition to responsive site. A stylesheet for logged in users, else, the old one. The problem came with the texts, as unlike the rest of the sections, the images illustrate the articles and they are called within the body of the articles, not their custom_fields. This means that their sizes and positioning varies.

The rest of the sections are more standardised and they are more straight forward to update.


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