I’m using the basic kitchen sink template and i’ve removed all the links… I’ve created a row and two columns of 50 and added image in it.
The problem i’m facing is that in some mobile like Motorola MotoG3 or MotoG4, and some other phones, the css and js are not loading… and no errors are showing in the console also.
It is working on all the latest new phones… SO i’ve tested it on the testlab in Firebase MotoG5, it is still not working.
The code is shown below
<title>Framework7</title>
<link rel="stylesheet" href="css/framework7.bundle.css" type="text/css">
<link rel="stylesheet" href="css/app.css" type="text/css">
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
<link rel="icon" href="img/f7-icon.png">
</head>
<body>
<div id="app">
<div class="statusbar"></div>
<div class="panel panel-left panel-reveal">
<div class="page">
<div class="page-content">
<div class="block-title">Left Panel</div>
<div class="block">
<p>This is a left side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view like in <a href="#" data-panel="right" class="panel-open">Right Panel</a></p>
</div>
<div class="block-title">Main View Navigation</div>
<div class="list links-list">
<ul>
<li>
<a href="/accordion/" class="panel-close">Accordion</a>
</li>
<li>
<a href="/action-sheet/" class="panel-close">Action Sheet</a>
</li>
<li>
<a href="/badge/" class="panel-close">Badge</a>
</li>
<li>
<a href="/buttons/" class="panel-close">Buttons</a>
</li>
<li>
<a href="/cards/" class="panel-close">Cards</a>
</li>
<li>
<a href="/checkbox/" class="panel-close">Checkbox</a>
</li>
<li>
<a href="/chips/" class="panel-close">Chips/Tags</a>
</li>
<li>
<a href="/contacts-list/" class="panel-close">Contacts List</a>
</li>
<li>
<a href="/data-table/" class="panel-close">Data Table</a>
</li>
</ul>
</div>
<div class="block">
<p>Sidebar.</p>
</div>
</div>
</div>
</div>
<div class="panel panel-right panel-reveal">
<div class="view view-init view-right" name="right" data-url="/">
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="title">Right Panel</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>This is a right side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view.</p>
</div>
<div class="block-title">Panel Navigation</div>
<div class="list links-list">
<ul>
<li><a href="/panel-right-1/">Right panel page 1</a></li>
<li><a href="/panel-right-2/">Right panel page 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title sliding">TEST APP</div>
<div class="right">
<a class="link icon-only panel-open" data-panel="right">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
</div>
</div>
<div class="page-content">
<div class="bannerAds">
<img src="https://static.wixstatic.com/media/aa8257_123faca0d2214855a104e540b89e907b~mv2.gif" width="100%"/>
</div>
<div class="row">
<div class="col-50 category">Category 1<br/>
<img src="https://www.pteacademy.in/wp-content/uploads/2018/08/Convenient-Location-360x250.png" class="border-round" width="100%" />
</div>
<div class="col-50 category">Category 2<br/>
<img src="https://www.pteacademy.in/wp-content/uploads/2019/02/Adobe_Post_20190203_145339-360x250.png" class="border-round" width="100%" />
</div>
</div>
<div class="row">
<div class="col-50 category">Category 3<br/>
<img src="https://www.pteacademy.in/wp-content/uploads/2018/10/IMG_20181015_202126-1-360x250.jpg" class="border-round" width="100%" />
</div>
<div class="col-50 category">Category 4<br/>
<img src="https://www.prototypo.io/wp-content/uploads/fly-images/1100/Dribbble-001-360x250-c.png" class="border-round" width="100%" />
</div>
</div>
</div>
</div>
</div>
It is working on “Robo test, Moto G (5) Plus, API level 24”
Not working on “Robo test, Moto G4, API level 23”
Can you please help me what is the problem it is occuring?