Header Image gives bad mobile view

I was asked to create an order form for some marketing materials and they wanted a picture by each item. I have embedded the form on our website and it looks fine on the desktop but when I brought it up on the phone I got drastically different results. The image that I put to the side of the check boxes got push but what is worse is the images that I put with the headlines got super tiny to where you can't even see them. See screen shots to see the difference. what should I do?

The reason for this bad behavior is because you are using a header to display the image.

However, for a quick fix you can try injecting this CSS:

@media only screen and (max-device-width: 540px) {

.header-logo {

width: 50%;

}

}

How to Inject Custom CSS Codes

Note, that a better approach would be to use an image field instead. I see you are using the image field for some fields, which are displaying correctly. So for it to be perfect I would use image fields for all your pictures.