Banner image on donation form offset - help?

Diana Lee

Hi all,


I am in the process of updating our donation form. When I created and uploaded a new banner image, for some reason it is floating to the left of the donation form container. I have tried a million and one things to try to bump it over to the center but nothing has worked so far. I am afraid that it's possible that I've just stared at this too long and am missing an obvious solution, but is anyone please able to help?


Attached is a link to the donation form. The background is white and then the donation form container is light grey - you can see there is more negative space on the right than on the left. Any suggestions? Thanks in advance!

https://secure2.convio.net/mspca/site/Donation2?df_id=14201&14201.donation=form1&set.DonationLevel=16907&_ga=2.197074476.1634664842.1536150768-1159803949.1535644081

Brian Mucha

This issue with the centering problem is that you have width: 100%; on the banner_text_large paragraph. With the regular css box model, your margins, borders, and padding ADD to that width, making it more than 100%.


.mobile p#banner_text_large {

font-size: 24px;

font-family: Montserrat, Arial, sans-serif;

margin: 0 auto;

width: 100%;

padding: 20px 20px;

text-align: center;

}


I'd change that to width: unset;


BPM



PS -


This could be confusing, but I thought I'd point out...


View your page source. You have two large style blocks on this page labeled /* TeamRaiser Service Module Styles */, one in the HEAD and one INLINE on your donation form in a caption field. These are 400 lines of css that are mostly the same, but I think the second one is being edited while the first is not and they are growing apart. This is not 'invalid', but I suspect it isn't intentional and is probably confusing.


For instance, the HEAD style block has this:


.mobile p#banner_text_large {

font-size:24px;

font-family: Verdana, Helvetica, Arial, sans-serif;

float: left;

margin: 0 auto;

width: 400px;

padding: 20px 20px;

text-align: center;

}


While on the same page further down your CAPTION styles has:


.mobile p#banner_text_large {

font-size:24px;

font-family: Montserrat, Arial, sans-serif;

margin: 0 auto;

width: 100%;

padding: 20px 20px;

text-align: center;

}


You probably should be editing the first block in the PageWrapper and not even have the second copy in the caption. But if you can't edit pagewrappers, then you can add styles like you did in the caption, but you don't need the entire block. Just the few styles you are overriding.


.mobile p#banner_text_large {

font-family: Montserrat, Arial, sans-serif;

width: unset;

}


All the rest is the same, so no point in having it twice.