I'm developing a personal website using react and I'm facing a very werid issue.
I've developed this website using create-react-app and tested it using the npm start command and made sure that everything in my website runs exactly as I would imagine it would. During testing the website looks totally fine.
I've now built my website using npm run build but I'm finding that some of the CSS works while some does not. This happens despite all of my CSS being in a single file.
I should not that I'm not getting any errors in the developer tools in chrome at all or anything of that sort.
Here is an example of what I mean. The image below is taken when the website is run through npm start
However, after building the website and opening the index.html file, the following screenshot is obtained
As you can see the styling for all of the other components is present except the styling the for Contact Us title at the beginning. Other titles on the page seem to be okay but this title does not seem to have the styling in place at all.
Additionally, there are other parts of the page where the styling if off too in the built version despite it being fine during testing.
My code is on https://github.com/Lm7m/Lm7m_website and I would appreciate any help I can get on this issue.
apply like this in index.html
create variable before return and then assign to tag
let colorstyle={
color:black
}
<h1 style={colorstyle}></h1>
Related
I started looking for React development stuff and I came across something I wanted to try and started working on a project, but when I ran the command npx create-react-app my_app_name my CSS color picker stopped showing up in the index.css file, and I tried another projects I have been working on previously where I remember using the color picker, and it still didn't work.
Another weird thing is that I can see that html file has that enabled and it works perfectly, but in CSS it doesn't I tried everything on the internet, but nothing worked, any possible way that react changed my settings in the process and disabled something? is there a solution for this?
Ok if anyone stumbles across this, it might help.
After uninstalling VSCode Completely, and installing it again it started working again, and what my initial problem was that I had installed PostCSS Language Support, which upon installing it before I had no problem, but with probably in latest patch, I got the problem where the picker and also the suggestions were deleted/disabled by VSCode.
If you have PostCSS Language Support, just disable it, and everything should work perfectly.
So I'm noob in working with node.js and react but I started developing a simple website.
I have some questions but I don't have any programmers around me.
I use lite-server for browser syncing , but when I open my index.html file without that-I mean by only clicking on it and opening it in chrome- it looks like none of the bootstrap classes works. so if I want to open the project I developed in localhost in a different computer what should I do ? and why this happens??
cause I have developed simple websites like this one before-without node.js- and I could zip the whole root folder and send it to someone else but now it's not possible for me to do so.
I would like to showcase a page from my Ionic 3 project onto my website.
I have been trying to copy the rendered html from the simulator with the rendered main.css and placing it onto my website using a Marvel css device.
It still seems to need hours of finessing to get to what the simulator looks like.
** This is not a clashing of css files. I checked.
Does anyone know an easy way showcase a demo of the app onto the website?
Just deploy your built code from project's www directory (wrapped in your css Marvel device container) to your web hosting and it should work given that you do not rely on ionic/cordova only functionalities that would not work on a desktop anyway. In the end it is an Angular app.
I'm trying to deploy a site to Heroku using node.js, and I've run into a bit of an issue. When I run my site locally, it looks as I expected it to. However, once I deploy it to Heroku, it seems that it does not recognize the CSS file I have included, despite the fact that it is using the same exact files and file structure.
I have confirmed that my HTML and CSS code is syntactically correct, and that the CSS file is being pushed through Git. I made a commit by changing one thing in the CSS to make sure that it was being pushed (it did).
Here's how I access the CSS file:
<link rel="stylesheet" type="text/css" href="css/style.css">
Here is an image of how the website looks locally (left) and deployed on Heroku (right) using the same exact code (the black boxes are just from me obscuring some personal details).
Website Comparison
Does anyone know why Heroku refuses to use my CSS? I've been racking my brain for 2 days on this can can't figure it out.
I had the exact same problem, it happend I miss one character in my whole code. Let me explain
When I heroku opened my project no css loaded, but interestingly enough jquery was working fine and the css that jquery was getting from the css file was just fine. The css file was not the problem.
Then I found that the browser was blocking some
content.
If you tell the browser to read the blocked content anyways, it will show the page no problem, but it will show a https with a horrible red line crossing it, not an option. Then I checked what content the browser was blocking
(blocked content)
it was my bootstrap link.
So I was linking my bootstrap with http and not https.
I added that letter s and it is working fine now.
Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.