Responsive design at checkout registering

  • Posts: 299
  • Thank you received: 2
9 years 1 month ago #191349

-- url of the page with the problem -- : www.vestlisfiske.se
-- HikaShop version -- : 2.3.5
-- Joomla version -- : 3.3.6
-- PHP version -- : 5
-- Error-message(debug-mod must be tuned on) -- : NO error message

Hi,
Some of our customers using mibile phones has complained recently about problems to register as a new customer at the checkout.
The problem is that the fields extend the right limit of the screen.
I have told them to tilt the phone 90 degrees and then they can fill the form, an easy solution to me but customers sometimes don't accept this, they want it to work no matter what angle they hold their phone.
My question is if it is possible to have the checkout registration fields responsive even on mobiles?
I am using the HikaShop template brown_style
Thanks
Micke

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

  • Posts: 12953
  • Thank you received: 1778
9 years 1 month ago #191353

Hello Micke,
The solution will probably be to re-adapt the CSS code applied to your registration page by using media queries : www.hikashop.com/forum/2-general-talk-ab...-queries.html#114251


You can do the modifications in the frontend css file via the menu Configuration > Display > CSS
Use the @media tags to change the width of the columns when the width of the page is less than xx.

ex:
@media (max-width: 767px) {
.hikashop_products .row-fluid .span4 { width: 49% !important;}
}

Here is some documentation about the layout customization:
www.hikashop.com/fr/support/documentatio...ize-the-display.html

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

  • Posts: 299
  • Thank you received: 2
9 years 1 month ago #191443

Hello Mohamed,
Thanks for the reply, however this didn't solve my issue.
It was pretty simple though after checking with firebug and setting some css like this in style_brown.css:

.hikashop_checkout_login {
	clear: both;
    margin: auto;
    max-width: 99%;
    width: 690px;
}

.hikashop_checkout_login_left_part {
    float: left;
    max-width: 98%;
    width: 250px;
}

.hikashop_checkout_login_right_part{
  float: left;
  max-width: 98%;
  width: 420px;
}

The registering fields nicely display under each other in mobile phone vertical view.

The display of the cart contents at the checkout found in the checkout => cart.php is more complicated as it is setup in table form on this site.
On another site I have it is set up so the table will display products etc in one row each, the way I want it. See screen shot here:


But where do you define that in backend admin? I don't seem to find that setting anywhere?
If I could set it up like that also in the vestlisfiske site my problem would be solved.
Any guidance highly appreciated.
Thanks
Micke

Last edit: 9 years 1 month ago by LAMF.

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

  • Posts: 299
  • Thank you received: 2
9 years 1 month ago #191467

If I want to hide the column titles in responsive view to avoid the annoying text that overlaps the other text I thought this would be how to do it, I addes this css in the red_style.css file:

.responsive .hikashop_cart_title {
	display: none !important;
}

But it seem to have no effect on the output.
Any suggestions please...

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
9 years 1 month ago #191495

Hi,

What could be done is:
#hikashop_checkout_page #hikashop_checkout_cart thead{
display:none;
}
#hikashop_checkout_page #hikashop_checkout_cart td{
float:left;
}

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

  • Posts: 344
  • Thank you received: 3
9 years 1 month ago #191944

nicolas wrote: Hi,

What could be done is:
#hikashop_checkout_page #hikashop_checkout_cart thead{
display:none;
}
#hikashop_checkout_page #hikashop_checkout_cart td{
float:left;
}


In which CSS file should I place this code ?

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

  • Posts: 13201
  • Thank you received: 2322
9 years 1 month ago #191951

Hi,

You can put it at the end of the frontend css file of HikaShop via Configuration > Display > CSS or in your template css file directly.
www.hikashop.com/support/support/documen...ize-the-display.html

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

  • Posts: 299
  • Thank you received: 2
9 years 1 month ago #192227

HI,
This didn't work for me, if I use a mobile phone (with Android and Chrome browser) it still display the table header text.

Also if I want the table in view responsive like in two of my new sites also applied to my older sites where the table extends the margins of the phone rather than pushing the table cells under each other. How is that accomplished?

You can compare these sites at checkout:
metebutiken.se (this one makes the table extend outside of the telephone display screen)
dsgbutiken.com (this one works with the tabler layout on a mobile device)

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

  • Posts: 13201
  • Thank you received: 2322
9 years 1 month ago #192243

Hi,

The code to add is:

#hikashop_checkout_page #hikashop_checkout_cart td {
    padding-left: 0 !important;
}
#hikashop_checkout_page #hikashop_checkout_cart td {
    float: none !important;
}
And in your case, you have to add it at the end of the style_red.css file.

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

  • Posts: 299
  • Thank you received: 2
9 years 1 month ago #192324

HI,
Thanks that partly solved the issue, as the register form now display perfect.
But it doesn't solve this (see screenshot of the cart listing where the annoying black titles are displayed if I could take them away it wouldn't for example hide some of the texts), is it possible to solve this?:

Last edit: 9 years 1 month ago by LAMF.

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

  • Posts: 13201
  • Thank you received: 2322
9 years 1 month ago #192330

Hi,

My bad, the first property must be:

#hikashop_checkout_page #hikashop_checkout_cart td {
    padding-left: 30% !important;
}

The following user(s) said Thank You: LAMF

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

  • Posts: 299
  • Thank you received: 2
9 years 1 month ago #192376

Wonderful!
Big thanks!
Looks perfect on a mobile...
But... on desktop version it looks weird...



And still how can I set it up so the sites metebutiken.se and vestlisfiske.se will display the same nice way as dsgbutiken.com?
I can't find any differencies in the settings that make dsgbutiken.com displaying it different from the other two sites...

Last edit: 9 years 1 month ago by LAMF.

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

  • Posts: 13201
  • Thank you received: 2322
9 years 1 month ago #192379

Hi,

Do you have the same HikaShop version on all the websites ?
Is the "Bootstrap" option enabled in Configuration > Display > CSS ?

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

  • Posts: 299
  • Thank you received: 2
9 years 1 month ago #192570

Xavier wrote: Hi,

Do you have the same HikaShop version on all the websites ?
Is the "Bootstrap" option enabled in Configuration > Display > CSS ?


Yes it's 2.3.5 on all of the sites and Business version.

No Boostrap option on any of them.
In Configuration > Display (in CSS I can only choose different styles for Frontend CSS file, Style front-end and Control panel CSS file. No bootstrap under CSS.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
9 years 3 weeks ago #192575

Hi,

You should add the code like that instead:
@media (max-width: 767px) {
padding-left: 30% !important;
}

That way, the CSS will only apply on mobile devices

The following user(s) said Thank You: LAMF

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

Time to create page: 0.113 seconds
Powered by Kunena Forum