I hope I put this in the right area. I’m a newbie, so please let me know if I should move it somewhere more appropriate…
I built (with a ton of help from a friend) a cute little 2 page website that generates a certificate suitable for printing and framing (if you like having jokes on your wall). I built the idea using a bootstrap drag and drop app and he converted it to PHP as well as added some features like field verification and emailing me the values the user selected when it is used.
My friend did an amazing job helping me bring the idea to life. The problem I’m having is that the certificate and text line up well on the desktop print image version, but on mobile, the text shifts over and down.
I’m pretty sure it is due to using fixed points to float the variable information over the certificate image.
Any ideas as to how to go about making both the image and text elements size and line up correctly in both formats? We tried using percents and it didn’t work for mobile. Different results based on phone dimensions too.
We also tried generating a single image rather than the layers, but weren’t successful there either.
www.center4certs.org Is the site.