|
Hi,
Thanks for helping me in my previous problem. However, I now have a new one.
I installed Ajax Quick Checkout along with the compatibility fix available on this forum.
However, there are a number of display issues present in the forms. For example, on mobile the forms are not aligned properly. Text besides checkboxes are bunched up to one side, and cart totals are on the wrong side. Asterisks for required fields are not displayed. Overall it looks very different to the demos on the AQC website.
Forcing Bootstrap in the AQC control panel does not solve the problem, although some things look a little better.
Could you please look into what can be done to make it function like the AQC demos?
Thank you
|
|
|
I have same problem on opencart 2.1.0.1
6 days is a long time for an issue to go unanswered.
here is a screenshot to further illustrate the problem, On the left is what pavilion looks like, on the right is correctly working store.
>>http://screencast.com/t/8R5c81TgO94s
-
This reply was modified 2998 days ago by
 bigmoon.
|
|
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums! |
|
|
Didn’t help much at all..
Here is what it looks like after adding css.
http://screencast.com/t/aq5hnIpcr
also squished breadcrumbs and button heights
http://screencast.com/t/za7TBYvILX
|
|
|
Hi,
The custom CSS you uploaded did slightly improve the checkout on my website. I have made some further modifications and the checkout page is almost ready.
However, there is still a problem with alignment, especially on smaller width screens (e.g. mobile).
On wide screen desktop: The text-input boxes are not centered and are not full width. I think bigmoon is having similar issues, but a little different.
On mobile: No alignment at all, everything is bunched up to one side. example: http://imgur.com/0y1fuLj
Please could you look into why there are alignment problems? I thought alignment was automatic since it is using Bootstrap forms, but it seems to be buggy.
|
|
|
this css fixes the left alignment issues, there are still other problems.
#d_quickcheckout .form-horizontal .control-label {
text-align: left !important;
}
|
|
|
Hey bigmoon, that fix did not solve alignment when the screen width is very small (make your browser window very small to see what I mean).
For me this CSS solved my alignment issue and also behaves properly on smaller screens:
#d_quickcheckout .form-group div[class*="col-"] {
width: 100% !important;
}
A small problem I still have is why I there is padding/margin to the right of the text-input boxes (see http://imgur.com/HGXj3a5). Ideally the text input boxes would stretch the entire width of the container.
|
|
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums! |
|
|
I have same problem with Ajax quick checkout and Pavilion.
Some problem solved with CSS in this thread, but i have the problem with squished breadcrumbs and button heights.
Same like bigmoon have, http://screencast.com/t/za7TBYvILX
Have anyone found a solution for this?
|
|
|
Hi,
Here is some more CSS that fixes buttons spacing:
#d_quickcheckout label {
width: auto;
}
#d_quickcheckout .btn {
height: 30px;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 30px !important;
}
#d_quickcheckout #qc_confirm_order {
height: 40px;
line-height: 38px !important;
background-image: none !important;
border: none !important;
}
@media (max-width: 768px) {
#d_quickcheckout .qc-quantity[class] {
width: 65px !important;
}
}
Code was taken from here:
http://support.themeburn.com/topic/text-width-issue-at-checkout
BR,
ThemeBurn team
|
|
|
Thanks very much. I think I tried that code yesterday but I diden´t se any difference.
But now it´s works, or I see the difference 
I get some code from Ajax quick checkout support today and that code fix the problem with breadcrumbs and some other things.
So I think most of the problem is solved now
|
|
|
I get this code, if it´s can help anyone else here whit same problem.
#d_quickcheckout #payment_address label { width: initial!important; }
#d_quickcheckout #shipping_address label { width: initial!important; }
#d_quickcheckout .col-sm-4 { width: 30%!important; }
#d_quickcheckout #payment_address .form-horizontal .control-label { text-align: left!important; }
#d_quickcheckout .input-group { background-color: #333333!important; }
#d_quickcheckout input + .input-group-btn button { width: 35px; opacity: 1; }
#d_quickcheckout .input-group-btn { right: 0px; }
#d_quickcheckout .col-sm-9 { width: 70%; }
#d_quickcheckout #confirm_view .form-horizontal .control-label { text-align: left!important; }
#d_quickcheckout #confirm_view .btn { padding: 0px!important; }
.modal-backdrop.in { opacity: .5; }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000;}
.fade { transition: opacity .15s linear; }
and I use this code I get from TB support in this thred
#d_quickcheckout label {
width: auto;
float: none;
}
#d_quickcheckout .btn {
height: 30px;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 30px !important;
}
#d_quickcheckout #qc_confirm_order {
height: 40px;
line-height: 38px !important;
background-image: none !important;
border: none !important;
}
@media (max-width: 768px) {
#d_quickcheckout .qc-quantity[class] {
width: 65px !important;
}
}
I ‘m not really sure what exactly the code strings does, but it’s works good now
P.S Maybe and I think they have done other changes in the files too. But I am not sure and I don’t know what changes.
|
|
|
Glad everything has been sorted
BR,
ThemeBurn team
|
|
