Alignment errors in frontend display

  • Posts: 15
  • Thank you received: 0
10 years 6 months ago #130718

-- url of the page with the problem -- : nimveda.com/index.php/products/go-shopping
-- HikaShop version -- : HikaShop Starter: 2.2.2
-- Joomla version -- : Joomla! 2.5.14
-- PHP version -- : 5.3.27
-- Browser(s) name and version -- : Google Chrome
-- Error-
I am not a coding expert ( so simple answers would help thanks), therefore I am really stumped why the following display errors are happening on just a few pages in my site with the shopping cart. Even after doing the latest update didn't make a difference so I am hoping someone can help me on this as I cannot find anything in the forums relating to my problems.

1/ First problem is the Checkout page of the cart. As you can see in this attachment



the Coupon section, payment section and terms are all squished up together and left/right aligned funny so it's not looking very tidy. How do I get extra space between these elements on the page, top and bottom? And how do I get the Payment options & details to display cleanly and in the correct left/right alignment with each other? The same alignment issues are happening on the register/login page too as seen in this attachment:

As you can see here the Login area is butting up hard to the registration form. How can this be fixed?

2/ Next problem is the submit buttons on pop-up box for the "item added to cart" notice

As you can see this box is too small so you have scroll bars to move to see the "continue shopping" button and the text on the button are displaying too far to the right. How & where can this be fixed also as every other button on the site is fine accept the one for the pop-up when you add a new address for shipping also? Is this an issue with the pop-up function that is causing this button issue or what?





Please help as I have been searching for days for the answer to these problems and can't find a way to fix them.

Thank you

Newbie to Hikashop but lovin' it so far :)
Attachments:
Last edit: 10 years 6 months ago by Chook.

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

  • Posts: 81625
  • Thank you received: 13085
  • MODERATOR
10 years 6 months ago #130743

Unfortuantely, all these issues come from your template so updating HikaShop won't change anything.
You need to add custom CSS to straighten these up.
We have some documentation available here which explains how to edit the CSS yourself:
www.hikashop.com/support/documentation/1...ize-the-display.html
For example, the width of the content of the popups is forced by your template to 580px with the code:
#content
{
width: 850px;
}

of the file nimveda.com/templates/as002036/css/tmpl.component.css
Thus, you get the horizontal scrollbar in the popup while that shouldn't be the case normally.

Regarding the login/registration areas, you can add that CSS to separate them on your website:
.hikashop_checkout_login_right_part {
width: 340px !important;
}
.hikashop_checkout_login_left_part {
width: 350px !important;
}

Regarding the space between the areas, you should add such CSS:
fieldset{ margin-bottom: 50px !important; }

The following user(s) said Thank You: Chook

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

  • Posts: 15
  • Thank you received: 0
10 years 6 months ago #131029

Thanks very much for this nicolas but I am just not quite getting how to do this (being a newbie) so I think I will have to enlist some help from someone through the jobs section of this forum.

I really appreciate the quick response though (just wish I had a bit more experience to make this work). :)

Newbie to Hikashop but lovin' it so far :)

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

Time to create page: 0.088 seconds
Powered by Kunena Forum