Getting mobile printing output to match desktop version

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.

Thanks!

Hi @heyari,

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

As you’ll notice, your topic is now here in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

Cheers!

1 Like