React Application Appearing Distinct in Localhost and gh-pages Environment

Hello, I am new to React and currently working on building a portfolio. I encountered an issue while using the react-mdl library for the projects page. Specifically, when viewing my project on a mobile interface (tested on FireFox, Chrome dev tools, and OnePlus 7 Pro), the layout looks good. However, after pushing the code to Github Pages, the layout appears significantly different and not visually appealing.

I have tried various solutions to fix this issue, but none have worked so far. Any guidance to help me resolve this problem would be greatly appreciated.

For better understanding, I have provided screenshots:

Localhost view:

https://i.sstatic.net/lWF1f.png

Github Pages View:

https://i.sstatic.net/lRNdM.png

I apologize for not directly posting the code here to avoid cluttering the post with large media files. If you need additional information, please let me know. Thank you for your assistance.

Answer â„–1

It appears that the contents of the public folder in your repository have remained unchanged for the past month. If you're failing to build your project before deploying it to gh-pages, the live version of your website may be utilizing an outdated version which could result in formatting issues.

Make sure to execute npm run build followed by npm run deploy. This sequence will ensure that your public folder is updated with the most recent modifications you've made and subsequently deploy these fresh updates.

To learn more about the public folder in your CRA, check out this link - https://create-react-app.dev/docs/using-the-public-folder/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on extracting the text from the <script> tag using python

I'm attempting to extract the script element content from a generic website using Selenium. <script>...</script> . url = 'https://unminify.com/' browser.get(url) elements = browser.find_elements_by_xpath('/html/body/script[ ...

What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

I want the hint-bubble div to smoothly slide out (using 'transition: 0.5s') whenever the hint-btn is clicked. I have successfully implemented it so that the hint-bubble appears when the button is clicked, but it appears instantly and I am struggl ...

Exploring the React JSX Spread Attribute with cloneElement

Struggling with React and in need of assistance. Check out my code snippet below: React-router ReactDOM.render( <Router> <Route path="/" component={App}> <Route path="something" component={Something} /> < ...

The documentation for Gridsome/Netlify CMS has a flaw that results in Graphql not functioning

My attempts to integrate Gridsome with NetlifyCMS using Gridsome's documentation have been unsuccessful. Below is a snippet of the Netlify config.yml setup: collections: - name: "posts" label: "Posts" folder: "posts" create: true s ...

What is the best way to transfer the variant property of the material-ui TextField when using a higher-level React component?

I'm encountering difficulties with typing... Essentially, I have a wrapper React component for the @material-ui TextField but I am struggling with getting the typings correct for the variant property. Here's the main problem. Using @material-ui ...

Using JavaScript to empty input field when switching focus between input fields

I am experiencing an issue with clearing a input number field. Here is the code snippet in question: <input class="quantity_container" v-model="length.quantity" type="number" pattern="[0-9]*" inputmode="numeric" onfocus="if (this.value == &ap ...

What is the most effective approach for handling JSON data from URLs in a professional manner?

Hey there, I'm facing a dilemma on how to efficiently handle data retrieved from various URLs on my website. My website allows me to fetch JSON data from multiple URLs. For instance, there's a page full of posts related to a specific group with ...

External IPs cannot access Node.js

I am facing an issue with my Amazon EC2 Server where I have set up a node js server. It is not accessible from the outside using the public DNS, but it can be accessed from the same instance (localhost). Any assistance in resolving this problem would be gr ...

JavaScript alert: element does not exist

Check out my code snippet below. The inline JavaScript alert works fine, but the external one isn't firing. Every time I reload the page, I'm greeted with a console error message saying "TypeError: tileBlock is null". Any suggestions on how to re ...

I am experiencing issues with my React application as it is failing to run and throwing

My react application is encountering issues when trying to run with npm start and I am facing a high severity vulnerability. Despite attempting npm audit fix --force, the problem persists. I am seeking assistance on how to resolve this issue. 0 info it w ...

Incorporate Live Data into Google Charts Using Ajax Response for a Dynamic Visualization

I am struggling to successfully load a responsive Google Line Chart after an Ajax call. I have attempted to place the entire Google Chart code within the success part of the Ajax call, but it does not seem to work as expected. Below is my current Ajax code ...

React App generation error - Missing module: Error encountered while resolving

In my React front-end app created with create-react-app, all the source files are located in the ./src folder. Additionally, I have a Firebase cloud functions project for the backend in the ./functions folder with its sources in ./functions/src. Within th ...

What is the best method for updating inner html with AJAX using the results obtained from json_encode?

If you need further clarification on how this works, feel free to check out this fiddle for a demonstration. In my setup, I have multiple DIVs each with a unique ID such as desk_85 (the number changes accordingly). <div class="desk_box_ver id="desk_8 ...

stuck with an outdated dependency causing issues with create-react-app

Encountering a problem with create-react-app failing due to react-scripts expecting an older version of a dependency, making it difficult to select the new version as suggested. This appears to be an interface issue. Interestingly, I can successfully inst ...

How to easily remove margin in a Bootstrap alert component

I'm having difficulty removing margins within a bootstrap alert component and I can't figure out why! https://codepen.io/weellydooh/pen/MWKKoqg <div class="alert alert-primary" role="alert"> <p>A simple primary alert—check it ...

Contrast between using create-react-app with a backend node.js server and creating a react app stand-alone without setting up a node.js server

While exploring various React courses on Udemy, I noticed a difference in approach between instructors. Brad Traversy utilized create-react-app with a Node.js backend server, whereas Andrei Neagoie opted to use only create-react-app without a separate serv ...

Header alignment issue in JQGrid

Utilizing 4.4.4 - jQuery Grid and <= jquery 1.8.2, this is how I set up my jqgrid: function FAGrid() { var url1 = 'URL'; $("#FAList").jqGrid({ url: url1, datatype: 'json', mtype: 'POST', ...

What is the technique for choosing the parent's ID with jQuery?

When a user clicks on any team, I need to retrieve the parent's parent ID. For example, if someone clicks on a Premier League Team, I want to store the ID 2 in a variable called league_id. Here are my attempts so far: Using Closest Method $('u ...

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

Tips for updating the content of multiple tabs in a container with just one tab in Bootstrap 4.x

I am attempting to create two tab containers, where one is used to describe the content of a set of files and the other is used as a list of download links for the described files. Initially, I tried controlling the two containers using just one tab. I ca ...