Announcement

Collapse
No announcement yet.

Site Width - Checkout 2 Display issue

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Site Width - Checkout 2 Display issue

    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.
    Joe Arbogast
    http://www.birdsafestore.com

  • #2
    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.

    Comment


    • #3
      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.

      Comment


      • #4
        Birdsafe I forgot to tag you in this.

        Comment


        • #5
          Originally posted by ForcedFabllc View Post
          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?
          Joe Arbogast
          http://www.birdsafestore.com

          Comment


          • #6
            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.

            Comment


            • #7
              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;
              }

              Comment


              • #8
                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

                Comment


                • #9
                  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?
                  Joe Arbogast
                  http://www.birdsafestore.com

                  Comment


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

                    Comment


                    • #11
                      Thanks ForcedFabllc -- http://birdsafestore.com
                      Joe Arbogast
                      http://www.birdsafestore.com

                      Comment


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

                        http://snag.gy/C1CHQ.jpg

                        Comment


                        • #13
                          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;
                          }

                          Comment


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

                            Comment


                            • #15
                              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
                              Joe Arbogast
                              http://www.birdsafestore.com

                              Comment

                              Working...
                              X