Hexo-theme-next: Overflow on mobile in Pisces [solved]

[GARENFEATHER]

移动端页面左滑可以看得到白边，魅族Pro6手机

[ivan-nginx]

請用英文寫。

[GARENFEATHER]

the page look like ↓ on my mobile phone
https://imgchr.com/i/9C15TS

[GARENFEATHER]

Looks like it doesn't suit my mobile browser?

[ivan-nginx]

What's browser?

[GARENFEATHER]

Apple Safari

[ivan-nginx]

Version?

[GARENFEATHER]

I found both two browsers have this problem↓
Safari：AppleWebKit/603.3.8 Version/10.0 Mobile/14G60 Safari/602.1【useragent data get from WhoIsHostingThis】
Chrome：Chrome 64.0.3282.123

[ivan-nginx]

U use 5.1.4 version with scheme Pisces.
And on IPhone 6 we see this strange bug:

Here is 6.0.0 version with scheme Pisces on https://rainylog.com

All looks fine as we see.

[tsanie]

The width of the svg was defined to 426, there will be a problem in most mobile layout. I don't know it was generated by which plugin, but maybe the parent div could apply a property overflow: hidden to temporarity resolve it.

[ivan-nginx]

Try to set width: auto;

[GARENFEATHER]

@tsanie even without svg I got this bug too, so it's nothing with svg I think

[tsanie]

@GARENFEATHER but it seems really the svg problems, try to open http://blog.garenfeather.cn/2018/01/29/test/ and there is no issue with it, and then open http://blog.garenfeather.cn/2018/01/29/stackedit/ it will appear.

And then, try to manual remove the svg element in the html (using the developer tools), the issue would disappear.

[GARENFEATHER]

Not only my blog,
I try to open https://notes.wanghao.work/, and it has the same problem
I found that it got a big bakground image, maybe sth wrong with that image or we use the same version?

[tsanie]

The problem is usually caused by an overflow content, and I have got the same problem when I start to use hexo-reference.

ps: I can't find the issue in this homepage, could you give me the URL of problem page?

[tsanie]

Oh, found it, his brand (Doublemine) has a large padding (0 80px), and any device that screen width less than 368 will occur the similar problem.

[GARENFEATHER]

@tsanie yeah, actually you're right, I'v deleted the problem post(with overflow svg) and everything works well now. thx~^_^.
Sorry for replying too late, I was working for adding mermaid support...
And there's still a quick question that...I've heard that NexT has a slack team right? how can I join it to discuss sth related? (😄 yeah I will be really appreciated that if I can be invited...)

[ivan-nginx]

I've heard that NexT has a slack team right?

Nope. U heard lie i think.

About join, of course anyone can join. But there is one simple condition: u must want to code, not only to talk. If u will pull some commits and do code better, well, u can join. For now i see only words from u.

---

Also, if issue was solved, need to close it.