Site Width - Checkout 2 Display issue

[Birdsafe]

I'm not sure that changing the width of the template - no matter what the setting is -- 100%, 1000px, 780px, etc. -- it doesn't seem to change display issues -- one of them being alignment of the expiration date boxes for credit cards on Checkout #2 page. I'm wondering if others have this issue -- the month box is one line, to the right, and the year is a line lower, on the left -- doesn't look good at all.

[ForcedFabllc]

ours has this exact problem and we are running a width based on monitor size. We are in the middle of having our checkout page completely redesigned I am hoping its done before black friday.

[ForcedFabllc]

OK I think I found the fix for this. here is a screen shot of what I changed to fix it in the inspect element feature on firefox. http://snag.gy/5FlIg.jpg I changed that pixel dimension from 10 to 100 and it seems to align the boxes now.

[ForcedFabllc]

Birdsafe I forgot to tag you in this.

[Birdsafe]

OK I think I found the fix for this. here is a screen shot of what I changed to fix it in the inspect element feature on firefox. http://snag.gy/5FlIg.jpg I changed that pixel dimension from 10 to 100 and it seems to align the boxes now.

Thanks -- where are you making this change/fix?

[ForcedFabllc]

Birdsafe I have not made the changes in real time yet because I can not find what CSS file has that field in it. I may have to use FTP access to change them. I wont have time until this evening to check it out. with the new admin panel it makes it hard to find what I need anymore.

[ForcedFabllc]

Birdsafe I figured out how to fix this issue on our template. I used the inspect element tool to find this code


.ccgField label {
float: left;
width: 200px;
line-height: 1.8em;
text-align: right;
margin-right: 10px;
}

I made changes to it so that last margin was 100px instead of 10



.ccgField label {
float: left;
width: 200px;
line-height: 1.8em;
text-align: right;
margin-right: 100px;
}


I then took that code and pasted it into the template editor page /default_modified.css
I added the /* checkout date fields */ at the top to make a visual note of my change so if i needed to delete it I could find it fast.

here is a screen shot of where I put mine. I just added it at the bottom of the file. http://snag.gy/aNVWV.jpg

/* checkout date fields */

.ccgField label {
float: left;
width: 200px;
line-height: 1.8em;
text-align: right;
margin-right: 100px;
}

[ForcedFabllc]

Also have been crashing my way through editing the design of the templates learning some about CSS and what not as I go. one of my main goals is to eventually be able to customize our checkout page a lot. So I am practicing on a few things that I have read help conversions. The first one I have done and this is a rough attempt is to put a background color and border around my credit card inputs. This helps define the area and should help draw people to it. http://snag.gy/jAo0b.jpg

[Birdsafe]

ForcedFabllc -- thanks -- can't find that design element (.ccgField label ...) in my css file. Did you create that whole section? From reading your message, that original block was already there? Perhaps the code is different in each Theme?

[ForcedFabllc]

Birdsafe what is your site address? ill try to find what you need in your theme.

[Birdsafe]

Thanks ForcedFabllc -- http://birdsafestore.com

[ForcedFabllc]

here is a screen shot of the code that is on your site.

http://snag.gy/C1CHQ.jpg

[ForcedFabllc]

Birdsafe I had found it!

To save you some time. copy and paste this into your default.css file

.ccgField label {
float: left;
width: 200px;
line-height: 1.8em;
text-align: right;
margin-right: 100px;
}

[ForcedFabllc]

that is a copy of the code I found on your checkout page. I modified it at the margin right:

[Birdsafe]

Thanks ForcedFabllc - I would rather find the code - which I cannot -- and edit rather than risk an issue with inserting a second copy. Your image shows that code to be in "layout.css" -- which I cannot find anywhere. And that code is not in my default_modified.css file