Product Display Bootstrap - Options Overlap Mobile

  • Posts: 81
  • Thank you received: 6
11 years 7 months ago #135185

-- url of the page with the problem -- : mywebsite.com/mypage
-- HikaShop version -- : 2.2.2
-- Joomla version -- : 3.2
-- PHP version -- : 5.4
-- Browser(s) name and version -- : Google 31.0.1650.57

Couldn't find a answer for this specific to mobils

Please see attached image

PREVIOUS SENT TO WRONG CAT.....

Attachments:

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

  • Posts: 26256
  • Thank you received: 4041
  • MODERATOR
11 years 7 months ago #135199

Hi,

Are you sure you have the bootstrap design activated ?
(Or a template compatible with bootstrap).
I do not see elements which make me feel there is bootstrap in the page.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 81
  • Thank you received: 6
11 years 7 months ago #135202

sent you login details to inspect via private message

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

  • Posts: 81
  • Thank you received: 6
11 years 7 months ago #135204

On desktop perfect -- Mobile once you go into product options - Looks a mess

Last edit: 11 years 7 months ago by foxy3433.

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

  • Posts: 26256
  • Thank you received: 4041
  • MODERATOR
11 years 7 months ago #135216

Hi,

Username and password do not match or you do not have an account yet.


Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 81
  • Thank you received: 6
11 years 7 months ago #135218

try now -- didn't activate new account - should work fine now

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

  • Posts: 26256
  • Thank you received: 4041
  • MODERATOR
11 years 7 months ago #135221

Hi,

Your template have some bootstrap rules but it does not handle the bootstrap responsive rules.
I mean that, there is nothing which say that a "span6" on mobile device should be display in different lines ; like it is done in the official bootstrap responsive css.
getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css

@media (max-width: 767px) {
  [class*="span"],
  .uneditable-input[class*="span"],
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
}
Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: foxy3433

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

  • Posts: 81
  • Thank you received: 6
11 years 7 months ago #135225

Cheets Jerome.. slapped that code into the bootstrap .css worked a treat Cheers chap!

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

  • Posts: 36
  • Thank you received: 1
11 years 3 months ago #149752

Jerome wrote: Hi,

Your template have some bootstrap rules but it does not handle the bootstrap responsive rules.
I mean that, there is nothing which say that a "span6" on mobile device should be display in different lines ; like it is done in the official bootstrap responsive css.
getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css

@media (max-width: 767px) {
  [class*="span"],
  .uneditable-input[class*="span"],
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
}
Regards,


Thanks to this code I 've managed to display the categories to one column when the screen getting smaller. But I want to display the categories in 2 columns. How can I do that?
here is the link to my website.
christiantete-eshop.gr/joomlatest/index.php/brands

Last edit: 11 years 3 months ago by billkarv.

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

  • Posts: 13201
  • Thank you received: 2322
11 years 3 months ago #149931

Hi,

It seems that you have solved you problem. The categories are displayed in two columns.
This is CSS things, so we suggest to find responsive tutorials to manage this kind of display.

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

  • Posts: 36
  • Thank you received: 1
11 years 3 months ago #150205

Xavier wrote: Hi,

It seems that you have solved you problem. The categories are displayed in two columns.
This is CSS things, so we suggest to find responsive tutorials to manage this kind of display.


Yes I found a solution but I didn't know if it was a good CSS practice.
Thank you for your response, I think I am finding my way through responsive layout "world".
:)

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

Time to create page: 0.093 seconds
Powered by Kunena Forum