Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
 
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?


Find us on Facebook Follow us on Twitter View our YouTube channel
Search our site

 All Forums
 General
 CSS and Responsive Designs
 Messy CSS for checkout
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

ekrzycki
Advanced Member

USA
338 Posts

Posted - 04/07/2020 :  19:08:13  
Been getting strange checkout methods lately - people selecting payment using check or money order when they intend to pay by CC. I finally found out that it is a formatting issue on the smallest resolution (phone) during checkout. The additional information box is half size but mainly the payment radio buttons are a mess. Can anybody help with the CSS on this one?


Can't post an image here so see image here for what it's doing:
https://www.greatplainselectronics.com/proddetail.asp?prod=ZZ-CheckoutImage

Thanks,
Ed

dbdave
ECT Moderator

USA
9221 Posts

Posted - 04/07/2020 :  20:10:48  
Is it possible that maybe you updated and did not upload the new css file that came with the update?
If you haven't updated in a while, there have been changes to that area, so an update may sort it out.

David

Edited by - dbdave on 04/07/2020 20:11:18

Vince
Administrator

40082 Posts

Posted - 04/08/2020 :  00:58:19  
Hi Ed
I think the problem is because the text you have for each of the payment methods is quite long. For instance you have "Payment using Credit Card or PayPal" instead of say, "Credit Card". In the v7.2 line there are now more classes defined there so we could maybe remove the "Payment Method" text and expand the payment method lines so they go across the whole phone width. But assuming you are not on v7.2 you could improve things I think lowering the font size for mobile. Try adding these classes to your site style sheet. If you already have a breakpoint for mobile then add it to that without the opening "@media all and (max-width:480px) {" and closing "}"

@media all and (max-width:480px) {

div.cdformpayradio1{
font-size:12px;
}
div.cdformpayment{
font-size:13px;
}

}

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

ekrzycki
Advanced Member

USA
338 Posts

Posted - 04/12/2020 :  13:22:32  
Thank you Vince,
I simplified the text and added the changes to my CSS, much better.

Now - somewhere a 50% reduction in the "Additional Information" box is being added. Trying to find that one.

Phil
ECT Moderator

United Kingdom
7283 Posts

Posted - 04/13/2020 :  07:16:03  
quote:
Now - somewhere a 50% reduction in the "Additional Information" box is being added. Trying to find that one.

add this to your style.css file

textarea.addinfo {
width: 100%;
}

You may also need to set different widths per break points lower down in your css file.
The default width is currently set to 85%



* Database Migrations and Conversions*
* ASP to PHP Cart Conversions*

*Contact Us*
*Buy The PHP Capture Card Plugin*
*Rate Our Services/View Our Feedback*

Edited by - Phil on 04/13/2020 07:18:29

ekrzycki
Advanced Member

USA
338 Posts

Posted - 04/13/2020 :  11:13:52  
I had this in my style.css: "width=150px" for textarea.addinfo for the smallest resolution screen. No idea why.
Took this out and all things look good.

Thanks,
Ed

ekrzycki
Advanced Member

USA
338 Posts

Posted - 10/29/2020 :  20:24:31  
Updated website to 7.2.4 and all is working fine.
But during checkout - I still see a bit of messiness in the checkout section as seen here

https://www.greatplainselectronics.com/proddetail.asp?prod=ZZ-CheckoutImage

Appears to be that the "Credit card or paypal" line is skewed.
Tried changing to smaller text lengths but that has no effect. Went to "A", "B" and "C" for text length and no change.
Went to a long sentence for text strings - also no change other than word wrap.

Likewise, changing "Payment Method" line length also had no change. Only changing his display to none straightens things up. Text Align to left looks better as it matches above text - but this still buggers things up.

Any ideas on lining these up?


ekrzycki
Advanced Member

USA
338 Posts

Posted - 11/02/2020 :  17:41:51  
Must have been a cache issue. Thought i did multiple refreshes but apparently not.
Today things are working correctly.
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2020 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000