I'm having a problem that I can't seem to figure out.
On the live version of my new site I have created an image overlay hover effect. This hover effect works perfectly when I am developing locally but when I deploy the same site to Netlify for some reason my overlay div is abut 7 pixels higher than the image itself.
So here you can see the overlay fits perfectly (local dev server):
And here (deployed to Netlify) you can see the overlay is too high by a few pixels:
Any idea what might be going on here?
I'm using Gatsby Image Plugin at the latest version.
The site is https://rockymountainweb.ca/our-work/ if you want to take a look.
Things I've tried:
Updating Gatsby Image Plugin
Redeploying site / clearing build cache.
If I juggle things around in Dev Tools I can pull the <div class="overlay"> up into the <div class = ".data-gatsby-image-wrapper"> div and it is sized correcly, but there's no way that I can see to include children within the component. If I try that I get a build error.
Crying in a high pitched whine.
Thanks for any pointers!
Regards, John.
Related
I'm building a website using styled components. It works fine in my local environment but as soon as I run npm run build it no longer works on the hosted site. I have the latest version of styled components installed as a dependancy. The styled components names work but none of the styles are coming through.
This is how the Website looks in my local dev environment
This is how it looks after build
heres a link to the website after being posted
https://benmcloughlin.github.io/savvy-plan-lite/
here's a link to the github repository
https://github.com/BenMcLoughlin/savvy-plan-lite
I spent three hours rebuilding the app and deploying it after each change to determine where the issue was. It had to do with GlobayStyles, one of the styled-components features. If I was using global styles then nothing worked. If I removed global styles then it worked. I have no idea why but I just removed it and will no longer use it. Just wanted to answer my own question in case someone came across the same issue.
I'm developing this basic website for a friend's personal sailing firm. Yesterday I've added a bit of language support and pushed to master, so he can look at my progress daily. The code works without a hitch on Heroku at: https://seastorm-sailing.herokuapp.com/sl
Locally however the dropdown and carousel is not working, in other words - Bootstrap JS is not working in my estimation. When I inspect network, everything is in place, tried opening it on my phone with ngrok, not working. I've deleted the repo locally and fresh pulled what I know works on Heroku from https://github.com/MerceneX/SeaStorm-Sailing and still no luck. I'm sorry if this is trivial, but I have tried everything that comes to my mind.
Website text is a bit lorem impsum and some parts are Slovene/English, depending on the language chosen.
Thank you for any help!
I'm using the lastest version of svg2png to covert svgs like the one below into png's
https://s3.eu-central-1.amazonaws.com/boxxer/uploads/items/57c46a04f1dc422b002ff291.svg
Locally this works without any issues, but when I deploy my app to Flynn it seems to not be rendering the images referenced in the defs and the result look like the image below
https://res.cloudinary.com/dot-to-dot-design/image/upload/f_auto,q_auto,w_600/boxxer_s3/uploads/items/57c46a04f1dc422b002ff291_1472543810612.png
If I replace the cloudinary images with ones hosted on the server the png renders ok.
Also the current version of my site that's running on a different server and admittedly an older version of svg2png also works fine.
The problem I'm having is knowing exactly what's causing the issue as there are several new things.
Flynn server hosting, where the maintainers have advised that there shouldn't be anything blocking the images from loading.
svg2png can't help because I can't replicate it locally.
Cloudinary have also advised that there should be any reason for the images not to load.
Not sure why but I manage to resolve my isssue by removing the https protocol so the reference to my images looks like
//res.cloudinary.com/dot-to-dot-design/image/upload/f_auto,q_auto,w_600/boxxer_s3/uploads/items/57c46a04f1dc422b002ff291_1472543810612.png
I am use Meteor and I verified that everything is working fine when I use meteor deploy but when I deploy to Modulus, the website is missing the viewport meta tag so it's not responsive. Does anyone know the solution or how to approach fixing this issue?
The issue was fixed by setting A-records.
I've read in a post from December 1st 2012 at Slodge bloch that File and DownloadCache plugins could be used for downloading and caching images from http sources. I think that's what I need in the app I'm trying to develop with MvvmCross (great framework, congratulations!!).
My app, first connects to a remote server to download some basic configs. One of these configs points to an url to get the app icon. To save bandwith, I'd like app caches the icon the first time it gets it until the url changes.
I performed some search with no much success and I'd like somone pointing me to a good demo on how to cache images from http sources and then binding these image to UI Image controls (Droid, iOS and WP)
Thaks
Showing images on wp, winrt, xamarin.android and xamarin.touch from http is shown in these two N+1 videos:
Kittens - N=2 - https://www.youtube.com/watch?v=e-ZKgO8fTw4
Books - N=6 - https://www.youtube.com/watch?v=He6QvnLsPUA
I've faced the same issue recently and finally solved it. It was pretty easy, you just need to make sure that you added and initialized Cirrious.MvvmCross.Plugins.Json plugin in your project.
I created a similar question that it's solved already https://stackoverflow.com/a/17891681/1309164