css help...

18 views
Skip to first unread message

Jean-Christophe Helary

unread,
Dec 26, 2019, 3:42:58 AM12/26/19
to bbe...@googlegroups.com
Apologies for the offtopicness of the question so first, if you know any place where the questions would not be off topic let me know (please, no stackoverflow...)

The question is, I'm trying to recover from a 20 years lag in CSS development and I thought working first on a site where I can't change the HTML would be a perfect choice since I can work on the selector spec and from there move to more creative stuff.

Here is what I have now:

(sample, the links don't work)
https://brandelune.github.io/code/Visiting-Functions.html

original
https://www.gnu.org/software/emacs/manual/html_node/elisp/Visiting-Functions.html

and the css:
https://brandelune.github.io/code/emacs.css

I'm trying to use a media query to target mobile browsers so I have that thingy here in the middle:

@media (max-width: 40em) {
...
}

On the Safari/Firefox responsive simulators, the things work perfectly well.
When I check the page on my iPhone 11 or even on my wife's iPhone 6, I get the standard page with super small characters and no reaction to the max-width property.

And I have no idea what to do with that behavior... Where can I even start to debug that ?

Jean-Christophe Helary
-----------------------------------------------
http://mac4translators.blogspot.com @brandelune


Kerri Hicks

unread,
Dec 26, 2019, 8:07:22 AM12/26/19
to bbe...@googlegroups.com
Take a look at CSS 'resolution'.


There's a -webkit prefix for Safari.

Also, using em measurements for your breakpoints is unconventional. I typically use pixels.

--Kerri

--
This is the BBEdit Talk public discussion group. If you have a
feature request or need technical support, please email
"sup...@barebones.com" rather than posting to the group.
Follow @bbedit on Twitter: <https://twitter.com/bbedit>
---
You received this message because you are subscribed to the Google Groups "BBEdit Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bbedit+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/D30E58AD-EE74-4E36-8E93-62CE71B5B6C6%40traduction-libre.org.

Jean-Christophe Helary

unread,
Dec 26, 2019, 8:20:19 AM12/26/19
to bbe...@googlegroups.com
Kerri,

Thank you for the comment. I'll try that too.

I eventually asked the same question on reddit and it seems that the HTML should contain a

<meta name="viewport" content="width=device-width, initial-scale=1.0">

like tag.

https://www.reddit.com/r/css/comments/eft71n/iphone_safari_does_not_respond_to_maxwidth_media/

Do you agree that's the case ?

I'll be trying to add that to the texinfo output later tonight and see if that works better.

JC
> To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/CAEmA4uYJqKY6XiA6Q8Drsx_4vNXJGfrORQvZwKN_J%2Bdazen%3DLg%40mail.gmail.com.

Bill Kochman

unread,
Dec 26, 2019, 8:40:44 AM12/26/19
to bbe...@googlegroups.com
Jean, that is correct. The viewport parameter is required in all AMP-compliant HTML documents, as well as a canonical URL meta tag and other things.

For the record, several years ago, when I first learned about the benefits of using the AMP standard, I knew absolutely nothing about it. So, I had to learn completely from scratch, and sometimes it was quite frustrating.

Google is very strict regarding the dos and don’ts of AMP. However, after months of hard work and perseverance, I achieved a fully AMP-compliant website.

This was all done with basically two apps: BBEdit and Balthisar Tidy for Work. Also, there are many online AMP tutorials, as well as several AMP code validators, which I highly recommend that you use.

In closing, you may want to visit my website — billkochman.com — and look at the source code to see what proper AMP code looks like. All of my pages pass Google’s AMP validation.


On Dec 26, 2019, at 11:20 PM, Jean-Christophe Helary <jean.christ...@traduction-libre.org> wrote:

Kerri,

Holger Bartel

unread,
Dec 26, 2019, 9:14:08 AM12/26/19
to bbe...@googlegroups.com
Hi, 

From a quick guess without checking I’d assume you’re missing the viewport meta tag. Have a look here, hope it helps: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Best, 
Holger

On 26 Dec 2019, at 4:42 PM, Jean-Christophe Helary <jean.christ...@traduction-libre.org> wrote:

Apologies for the offtopicness of the question so first, if you know any place where the questions would not be off topic let me know (please, no stackoverflow...)

Jean-Christophe Helary

unread,
Dec 26, 2019, 9:16:12 AM12/26/19
to bbe...@googlegroups.com
Bill,

Thank you very much for the comment.

> On Dec 26, 2019, at 22:40, Bill Kochman <wordwe...@gmail.com> wrote:
>
> Jean, that is correct. The viewport parameter is required in all AMP-compliant HTML documents, as well as a canonical URL meta tag and other things.

I'm not aiming at AMP compliance (I personally don't think it is a good idea to have all the internet served exclusively from Google servers), I just need to have mobile Safari properly recognize the media query, but that indeed did the trick.

I just found some solid reference about it at MDN:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Also, it looks like viewport is an Apple invention...

Thank you all for your help.

Jean-Christophe
> To view this discussion on the web visit https://groups.google.com/d/msgid/bbedit/FDD11E6B-93B6-4A65-8A9A-2669DE6D4C4A%40gmail.com.

Jean-Christophe Helary

unread,
Dec 26, 2019, 9:19:40 AM12/26/19
to bbe...@googlegroups.com
Thank you for checking Holger,

That was indeed the case.

JC

Bill Kochman

unread,
Dec 26, 2019, 9:34:11 AM12/26/19
to bbe...@googlegroups.com
Jean, just as an added point, while full AMP compliance may not be your ultimate goal, I think it is important to point out that whether we like it or not, when it comes to Internet search, Google is the indisputable king.

Having said that, for those of us who are seeking maximum exposure for our websites, blogs, etc., SERP position is extremely important. This ties in directly to AMP. It is an established fact that on its SERPs, Google gives precedence to AMP-compliant websites and blogs.

In fact, as you may know, mobile device users will see a small blue lightning-type icon next to all sites which are AMP-compliant, so that they will know that the site will load fast on their device.

Okay. I am done now before Rich or Patrick tell me that I am getting too far off-topic. 😀🤪😬

On Dec 27, 2019, at 12:16 AM, Jean-Christophe Helary <jean.christ...@traduction-libre.org> wrote:

Bill,

Jean-Christophe Helary

unread,
Dec 26, 2019, 9:42:53 AM12/26/19
to bbe...@googlegroups.com


> On Dec 26, 2019, at 23:34, Bill Kochman <wordwe...@gmail.com> wrote:
>
> Jean, just as an added point, while full AMP compliance may not be your ultimate goal, I think it is important to point out that whether we like it or not, when it comes to Internet search, Google is the indisputable king.

Hence the reason to use duckduckgo instead :)

But I totally understand what you're saying.

> Okay. I am done now before Rich or Patrick tell me that I am getting too far off-topic. 😀🤪😬

:)

JC
Reply all
Reply to author
Forward
0 new messages