How to align Quantity field to add to cart button in Hika Shop

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #286796

-- url of the page with the problem -- : www.ginmacher.de
-- HikaShop version -- : 3.2.2
-- Joomla version -- : 3.7.1
-- PHP version -- : 7.0
-- Browser(s) name and version -- : Firefox, Chromecast
-- Error-message(debug-mod must be tuned on) -- : Quantitiy Field in Shop not aligned with Button add to cart

Heloo Hika-Team,

I solved almost all problems by myself now and adujsted variouse .css.files, but for this I do not find a solution.

See screenshot:



How can I align the hight of the Quantoty Input fiel per propduct that it's completly aligned with the button. I check the css code and I only see to change position of button itself or the text within the Quantitiy box, but not the box itself.

Thanks for help.
Alexander

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
6 years 2 months ago #286802

Hi,

It's just a bit of CSS misalignment with your template CSS.
You can add such CSS on your website to avoid that:
.hikabtn{
margin-top: -60px !important;
}

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #286897

Ni Nicolas,

thanks. Unforunately that does not help due to:

- if I move the .hikabtn up, it also moves all .hikabtn in the complete website up. That means, also in the cart overview, in the registration forms etc.

Is there no possibility just to move the quantity input field within the product overview itself?

Thanks
Alexander

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
6 years 2 months ago #286899

Hi,

It's easy. For example:
.hikashop_products .hikabtn{
margin-top: -60px !important;
}

The following user(s) said Thank You: ginmacher

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #286983

That works! Thanks a lot!

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #287976

Hello Nicolas,

one more :)

See this link: www.ginmacher.de/index.php/wacholder



I put now the Hika Button -60px top with that code:
.hikashop_products .hikabtn{
margin-top: -60px !important;
}

But if I want to do the same with the qty select button, it only takes the width, not the margin-top -60px.
.hikashop_product_quantity_div select{
width: 50px !important;
margin-top: -60px !important;
}

What's wrong here? How can I also put the product quantity -60px up??

Thanks a lor for your help.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 1119
  • Thank you received: 114
6 years 2 months ago #287996

Hi,

Its not working because you are using chosen and targeting wrong class. You should use this:

.hikashop_product_quantity_div .chzn-container {
width: 50px !important;
margin-top: -60px !important;
}

Hope that helps.

Thanks

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 2 months ago #288003

Hi all,

that works for normal Browsers, thanks a lot kyratn

But what I do not understand:

The code somehow does not apply to Browsers on Adroid/IPhone (in responsiv view). There the qty field is still below the add to cart button there

I tested it on Chrome and Firefox on my normal Laptop with Windows, even if I make the Browser window as thin as possible it still looks good. Only on my mobile e. g. on Andoid with Chrome and also with Firefox for Android it lstill ooks messed up.

Does anyone know why?

Please Log in or Create an account to join the conversation.

  • Posts: 1119
  • Thank you received: 114
6 years 2 months ago #288006

Hi,

Ahh sorry, forgot that chosen library is disabled on mobile so what you see is normal select box. You should also use your code like this one:

.hikashop_product_quantity_div select {
width: 50px !important;
margin-top: -60px !important;
}

Regards

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 1 month ago #288413

Hello kyratn, Hika Shop Team,

it's still not fully working :(

See this link in browser and mobile view:
www.ginmacher.de/index.php/basis-botanicals

In general I use this code within my template.css

.hikashop_products .hikabtn{
margin-top: -65% !important;
}

.hikashop_product_quantity_div .chzn-container {
width: 50px !important;
margin-top: -160px !important;
}

*.hikashop_product_quantity_div select{
width: 50px !important;
margin-top: -100px !important;
}

But as soon as I adjust the chzn.container margin-top, the Hika Button (Warenkorb or in englisch add to cart) also moves up in mobile view.

When I disable the code for the qty field chzn container the web version looks fine but in the mobile version the qty field drop-down will then be below the product and the button in the middle of the product.

Any idea how to fix that, so I can adjust mobile and browser view without influence with a code change the other one. It drives me crazy :)

Thanks a lot!

Alexander

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
6 years 1 month ago #288462

Hi,

Note that when you have such case (a CSS code you add for desktop viewing which breaks the display on mobile), there is an easy way out.
You can use the @media query trick of MySQL:
www.w3schools.com/css/css_rwd_mediaqueries.asp
That way, you can have some of your CSS code to run only for small width devices, or only for big width devices.

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 1 month ago #288515

Hello Nicolas,

thanks. I tried that one and for mobile and browser view it helps, but it leads to the next issue :) (it never ends!!)

I have a hika shop cart module also in the offcanvas to show the user the current shopping cart. And all the changes I apply to the qty input field also apply to the same field in the offcanvas (see screenshot) as well as to the shopping cart overview (see 2nd screenshot). The qty. input field in the checkout view is OK as I can manage it with a different css. Is there a way to seperate those to qty input fields???





Code I use for all that:
.hikashop_products .hikabtn{
margin-top: -200px !important;
}
/* for qty field*/
.hikashop_product_quantity_div .chzn-container {
width: 50px !important;
margin-top: -200px !important;
}

/* for qty field in checkout cart*/
.hikashop_cart_product_quantity_value select{
width: 50px !important;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
  
   .hikashop_products .hikabtn{
margin-top: 0px !important;
}
  
*.hikashop_product_quantity_div select{
width: 50px !important;
margin-top: -150px !important;
}
 
}

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
6 years 1 month ago #288519

Hi,

You should prefix your CSS with the class hikashop_products_listing so that it would apply only in the listings.
So instead of:
.hikashop_product_quantity_div select{
width: 50px !important;
margin-top: -150px !important;
}
you would have:
.hikashop_products_listing .hikashop_product_quantity_div select{
width: 50px !important;
margin-top: -150px !important;
}

The following user(s) said Thank You: ginmacher

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
6 years 1 month ago #289167

Thanks, that works!

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
2 years 10 months ago #333204

Hi again Admins,

as I thought this topic is solved I realized due to many customer feedbacks that it's still an urgend issue in the responsive design on Android and Apple Phones as well as if you resize the browser window to responsive view.

I have in my template.css the following coding (based on all the posts above from all of you - thanks for that).

.hikashop_products_listing .hikashop_products .hikabtn{
margin-top: -400px !important;
}

.hikashop_products_listing .hikashop_product_quantity_div .chzn-container {
width: 50px !important;
margin-top: -400px !important;
}


.hikashop_cart_product_quantity_value select{
width: 50px !important;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
  
.hikashop_products_listing .hikashop_products .hikabtn{
margin-top: 0px !important;
}
  
.hikashop_products_listing .hikashop_product_quantity_div select{
width: 50px !important;
margin-top: -400px !important;
}

 
}

This works so far in Chrome, Firefox, Internet Explorer (See picture below):



But in this Browser versions if you reduce the size of the window that it goes into the responsive mode, the result is this one her:




Furthermore, if you check it on an Andoird (in this case Samsung S10 Plus) in vertical mode, it looks like this:



In Android in horizomntal mode it looks more messed up again:




If I use an Iphone and the Safari Browser, it also looks totally messed up in vertical and horizonal view as responsive: To mention: the button is far below the product - so I click on the product above and buttoms are shown way more below the product.





The problem is, that customers cannot ad products to the basket neither in responsive mode at Android horizonal nor at both responsive views at Iphones Safari Browser.

I did some testing in the css also with different media resolutions (like 480 etc.) but changes are minor and they never apply to the Iphone version in the Safari Browser.

Could you please check the .css coding and let me know any changes to make that the add to cart button (Warenkorb) and the quanitity field have the same design in all the different versions so customers can order again the products.

I really appreciate your time and help in this case. As I am no CSS expert, a coding would be perfect that I can insert into my template.css file.

Thanks a lot in advance!!

Alex

Attachments:
Last edit: 2 years 10 months ago by ginmacher.

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13064
  • MODERATOR
2 years 10 months ago #333227

Hi,

In your CSS code, you need to use @media so that you have different CSS code apply for different width dimensions:
developer.mozilla.org/en-US/docs/Web/CSS/@media
For example so that the add to cart button appears below the image on mobile devices (since you can't "hover" on a smartphone), you could change the code:

.hikashop_subcontainer form {
    position: absolute;
    width: 100%;
    bottom: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
    transform: translateY(100px);
    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -ms-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
}
from the file /templates/lt_winery/css/default.css to:
@media screen and (min-width: 1026px) {
.hikashop_subcontainer form {
    position: absolute;
    width: 100%;
    bottom: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
    transform: translateY(100px);
    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -ms-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
}
}
That way, it will only hide the add to cart button behind the image when the width of the screen it higher than 1026px (so it will do it on computers, while it will keep the add to cart button below the image where the user can click/tap on it on devices with a small resolution like a smartphone). It's strange that your template provider didn't already do that here with his custom CSS for HikaShop.
That's an issue you should report to your template provider.

Please understand that these issues come from customization. Our support here is for using HikaShop and providing some guidance.
Customization is not part of the free service we offer with a HikaShop subscription, even when it is still active.
If you want us to work for you to sort out all of this, it's possible but it will have to cost extra as we'll likely spend a few hours on it.
If you're interested, please go through our contact form:
www.hikashop.com/support/contact-us.html

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
2 years 10 months ago #333240

Hi Nicolas,

thanks a lot. The code already helps on IPHONE 100%, on Andoird just 50% (in vertical view it's OK, in horizontal view the button and the qty. field is still messed up). Also in the browser version, if I resize the window to small it's still messup up).

I wrote you a request to www.hikashop.com/support/contact-us.html .

Looking forward to hearing from you soon!

Alexander

Please Log in or Create an account to join the conversation.

Time to create page: 0.150 seconds
Powered by Kunena Forum