0

Problem?

For some reason the first section below header (it is a "mobile friendly" website) is not being rendered in mobile view. It remains blanco.

It is only a small part of the CSS, so It's not a obvious CSS issue either.

enter image description here

What I have done?

1) Cloned a template and build my own layout with JEKYLL static site generator.
2) This template had a classic rootdirectory (css + index.html file).
3) I added {% SEO%} tag to <head>
4) I encountered an issue described here Why does liquid {%SEO%} tag not get integrated into head? instead it shows in body
5) I added yaml-front-matter to index.html to solve the issue, but also changed the rootdirectory to a jekyll architecture (_includes + _layouts + frontmatter in index.html
6) At the same time I attempted to reduce http requests by minifying the many css files into 1 file.
7) After I discovered the issue with the mobile view not being rendered I changed everything back to classic. Yet the problem remains.

Minimal

---
---

<!DOCTYPE html>
<html class="no-js" lang="zxx">
    <body data-spy="scroll" data-target="#primary-menu">
{{ content }}
    </body>
</html>

What I expect to happen?

That after adding yaml-front-matter, my mobile friendly website is rendered perfectly.

enter image description here

Link to responsive.css: https://github.com/bomengeduld/debadkamers/blob/master/css/responsive.css
Link to style.css: https://github.com/bomengeduld/debadkamers/blob/master/style.css
Link to index.html: https://github.com/bomengeduld/debadkamers/blob/master/index.html
Link to website: https://bomengeduld.github.io/debadkamers/

  • Cannot reproduce this problem on laptop. Seems to be a css / browser compatibility problem. – David Jacquel Apr 09 '18 at 12:23
  • its not a problem on laptop, its a problem on mobile – Gino Jan Ludikhuyze Apr 09 '18 at 12:25
  • It is strange, because earlier it did showed on my mobile. So what could be the issue? – Gino Jan Ludikhuyze Apr 09 '18 at 12:30
  • 1
    I just looked at your site on my mobile Chrome and Safari browsers, and I had to scroll past the section so the Javascript would trigger to bring the text in. It looks like you may be using an animation that hides the text initially and then swoops it in from the left. You may want to disable that script on mobile. – Max Gardner Apr 10 '18 at 15:55
  • After looking at your site I am pretty sure @MaxGardner has found the key to the solution of your problem. – Mr. Hugo Apr 10 '18 at 17:53

0 Answers0