I have a very basic setup, nothing special, just HTML (no Vue etc). I have Tailwind installed and everything is running. When I deploy to Netlify, Tailwind styles are applied, but still the site looks very different. I don't purge and I use the "netlify deploy" command.
So here are my steps:
I change something, watcher is running and outputting everything in /dist
I use scss
I run "netlify deploy" in my terminal
Here are the screenshots:
Local:
On Netlify:
As you can see, there is a lot more spacing between the icons and I wonder why that is. When I inspect the code, it's exactly the same. I have been at this for a couple of hours now and I can't procede before I know where this problem is coming from.
Things I have tried:
Added purging to the tailwind config, didn't help
Running "netlify deploy --prod", also didn't help
Clearing cache
Sources:
Repo: https://github.com/RobineSavert/map-portfolio
Netlify: https://6190119577337c9293c65f02--ecstatic-thompson-9cf61b.netlify.app/
My deployment settings on Netlify
Can anyone tell me what I am doing wrong? Thanks so much!
If you want the result to look alike first image, then coming to the wrapper for your icons on line 30:
<!-- from this -->
<div class="flex flex-wrap just m-16 py-3 justify-between">
<!-- to this -->
<div class="... justify-start">
would solve it, although i'm not sure about just??
Related
I am using next.js 11.1.0 , my images are not showing saying (image below). I tried upgrading to next.js 12 but the problem still persist. I also tried using img tag and it works fine, just next/image not working. It seems not to work on live site production. My images are stored locally. Anyone encountered this?
<Image
src="images/Uploads/Activities/StoryTelling/3_2022-05-07203A383A38.jpeg"
width={500}
height={500}
/>
If everything works fine on local but not in production it might be an image loader issue. I invite you to take a look at the documentation as you may need a custom function to resolve URLs.
Image loader
Built-in loader
I had the same issue when deploying on GCP but everything worked on Vercel.
You have to write src={/photoname.format} when it's Next Image, instead of the whole path.
please, can you help me?
I'm working on a blog project and one of the requirements is that the blog works even if the browser has javascript disabled. When using the project "https://github.com/dionatanaraujo/rollup-styled-jsx" a fork of "https://github.com/Tomekmularczyk/rollup-styled-jsx", we noticed that when disabling the browser javascript the components are not carrying styling.
How simulate the error:
Enter in the root project and run npm install and then npm run build:prod
Enter in the demo project cd demo and run npm install and then npm run dev
Access the browser http://localhost:3000, go to settings and disable javascript.
Note that the styles will not be loaded.
Please, is there something wrong or missing in this configuration so that the styles work correctly when javascript is disabled?
Component library with js enabled (work's fine):
Component library with js disabled (styles don't work):
The project that is in / demo and was built using Next.js to work with SSR. Please, if anyone can help with that it would be very rewarding.
This is not really a problem, the documentation says that when you disable javascript in dev mode css will not be loaded but in production it will. try to deploy your blog on vercel and disable javascript, you will then see that the css will still be loaded
I made a chatroom with Node.JS and Socket.io. I'm using bootstrap CSS and JS in my project for things like tabs and carouser. The website looks and works perfect on my local server, here aresome screenshots:
but when I pushed the same code on my github and deployed it on heroku, every thing is just cluttered: https://doclerchat.herokuapp.com/
Here is the source code on GitHub: https://github.com/anshul119/chatapp/
Seems like Bootstrap CSS and JS aren't loading thats why only those specific things are creating problems. How can I resolve this issue?
Any help is appreciated.
So, as #vanburen commented, this solved the problem:
Change your requests to the CDN from http to https:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
I have a problem with a project in Laravel, the problem is that when you edit CSS code or add images and reload the page, changes do not apply.
eg I had an image called 1.jpg which was then deleted, replaced with 2.jpg. I edited the code calling the image 2.jpg, but even after reloading the page, 2.jpg is not displayed.
It is not browser cache - I've tried clearing it, but the issue remains. This also happens to me when I edit CSS - the changes are not applied. Any ideas? I've used Sublime text 2 and 3 with windows 8.1.
I've tried php artisan cache: clear, deleting the cache of the project, and no luck. I'm going crazy, can anyone suggest what to do?
If you are adding the css in the resources/sass/app.scss then you need to run after it npm run dev , this will compile your css.
I suggest adding the css internally in the file in the head tags or even inline css. But everytime you make changes to your resources/sass/app.scss you need to run npm run dev
i m following michael hartl's ruby on rails online tutorial book and finished chapter 10:
my localhost displays everything in proper format:
profile page looks like this on localhost: http://img225.imageshack.us/img225/5301/profilen.png)
news feed looks like this on localhost: http://img826.imageshack.us/img826/2280/newsfeed.png)
but please visit--> whizcollab.herokuapp.com and check out the styling changes in comparison to the localhost...it looks very weird. all the content seems to be there but the css is different in my opinion. all the files are uploaded through git properly and pushed up to the herokuapp.
is there a compatibility issue?
please guide :)
Remember to do a 'git add .' then check with a 'git status'. If there are any files listed iteans that heroku did not receive your latest change. Just do a 'git push heroku master' and you should be fine.
That can't possibly be the same code deployed to the Heroku instance as you show locally in the screenshots. There are elements missing in the Heroku version.