React CSS does not display on mobile devices (Chrome, Safari, Firefox) but displays on Desktop Site

A

admin

Administrator
Staff member
I'm new to ReactJS and appreciate any advise that can be offered
<ul>
<li>I have a ReactJS app that I have created and deployed to Heroku</li>
<li>It's displaying perfectly on desktop (chrome, firefox, safari etc) but not displaying on mobile (iphone7) and tablet.</li>
</ul>
<blockquote>
Could one kindly advise me on the possible reason to this? I get no
errors in console
</blockquote>
<a href="
https://imgur.com/wa2rM
" rel="nofollow noreferrer"><img src="
https://imgur.com/wa2rM
" alt="enter image description here" /></a>
Code: 
app/public/index.html
Code: 
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
    &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot; /&gt;
    &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot;&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:[email protected];600;800&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;script async src=&quot;https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-XXXXXXXXX-X');
    &lt;/script&gt;
    &lt;title&gt;App | REACT App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;noscript&gt;
      You need to enable JavaScript to run this app.
    &lt;/noscript&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
Code: 
app/scr/App.js
Code: 
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Layout from './components/Layout/Layout'
import Footer from './components/Footer/Footer';
import Home from './components/Pages/Home';
import BlogIndex from './containers/BlogBuilder/BlogIndexBuilder';
import BlogShow from './containers/BlogBuilder/BlogShowBuilder';

class App extends Component {
  render() {
    return (
      &lt;BrowserRouter&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Layout&gt;
            &lt;Switch&gt;
              &lt;Route exact path=&quot;/blogs&quot; component={BlogIndex} /&gt;
              &lt;Route path=&quot;/blogs/:id&quot; component={BlogShow} /&gt;
              &lt;Route path=&quot;/&quot; component={Home} /&gt;
            &lt;/Switch&gt;
            &lt;Footer /&gt;
          &lt;/Layout&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    );
  }
}

export default App;
Code: 
app/src/containers/BlogBuilder/BlogIndexBuilder.js
Code: 
import React, { Component } from 'react';
import BlogIndex from '../../components/Blog/Index';
import axios from 'axios';

class BlogIndexBuilder extends Component {
  state = {
    posts: []
  };

  componentDidMount() {
    axios
      .get(
        &quot;http://public-api.wordpress.com/rest/v1/sites/xxxxx.wordpress.com/posts&quot;
      )
      .then(res =&gt; {
        this.setState({ posts: res.data.posts });
        console.log(this.state.posts);
      })
      .catch(error =&gt; console.log(error));
  }

  parseOutScripts(content) {}

  render() {
    return (
      &lt;div&gt;
       &lt;BlogIndex 
        posts={this.state.posts}
       /&gt;
      &lt;/div&gt;
    );
  }
}

export default BlogIndexBuilder;
Code: 
app/src/components/Blog/Index.js
Code: 
import Layout from '../../components/Layout/Layout';
import Header from '../../components/Header/Header';
import { Link } from 'react-router-dom';
import './Index.css';
import BlogBanner from '../../images/img-blog-banner.png';
import Moment from 'moment';
    
    class Index extends Component {
      removeUnicode(string) {
        if (string.indexOf(&quot;&amp;#8211;&quot;) &gt;= 0) {
          return this.removeUnicode(string.replace(&quot;&amp;#8211;&quot;, &quot;'&quot;));
        } else {
          return string.replace(&quot;&lt;p&gt;&quot;, &quot;&quot;).replace(&quot;[&amp;hellip;]&lt;/p&gt;&quot;, &quot;...&quot;);
        }
      }
    
      render() {
        return(
          &lt;Layout&gt;
            &lt;div className=&quot;blog_index_section&quot;&gt;
              &lt;Header /&gt;
              &lt;div&gt;
                  &lt;ul&gt;
                    {this.props.posts.map((post) =&gt; {
                      if (post) {
                        return(
                          &lt;li key={post.ID} className=&quot;card&quot;&gt;
                            &lt;Link to={`/blogs/${post.ID}`}&gt;
                              {post.featured_image ? (
                                &lt;img alt=&quot;blog header&quot; src={post.featured_image} /&gt;
                              ) : (
                                &lt;img src={BlogBanner} alt=&quot;BlogBanner&quot;/&gt;
                              )}
                              &lt;div&gt;
                                &lt;div&gt;{post.title}&lt;/div&gt;
                                &lt;div&gt;{this.removeUnicode(post.excerpt)}&lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/Link&gt;
                          &lt;/li&gt;
                        );
                      } else {
                        return null;
                      }
                    })}
                  &lt;/ul&gt;
              &lt;/div&gt;
    
            &lt;/div&gt;
          &lt;/Layout&gt;
        );
      }
    }
    
    export default Index;
 
You must log in or register to reply here.