Responsive design at checkout registering

-- 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

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

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:
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

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:
But it seem to have no effect on the output.
Any suggestions please...

Hi,

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

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 ?

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

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)

Hi,

The code to add is: And in your case, you have to add it at the end of the style_red.css file.

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?:

Hi,

My bad, the first property must be:

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...

Hi,

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

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.

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