Checkout Layout Issue at iPad Mini Resolution

  • Posts: 18
  • Thank you received: 1
9 years 1 week ago #220755

-- HikaShop version -- : 2.6.0
-- Joomla version -- : 3.4.5
-- PHP version -- : 5.4.37
-- Browser(s) name and version -- : Chrome Version 46.0.2490.86 m
-- Error-message(debug-mod must be tuned on) -- : No error

Hi,

I have setup my website using HikaShop and the T3 (bootstrap 2) template. Everything seems to be working well apart from one problem with degradation of the layout on the checkout page at particular resolutions (mini-tablet portrait, such as iPad mini). Please see the attached image.

It is not clear what is causing this issue but it seems possible that some of the styles within the Login and Registration modules might be causing an issue.

Please can you help.

Attachments:

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

  • Posts: 13201
  • Thank you received: 2322
9 years 1 week ago #220777

Hi,

Is the option "enable bootstrap" enabled in Configuration > Display > General display options ?

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

  • Posts: 18
  • Thank you received: 1
9 years 1 week ago #220885

Hi Xavier, yes the "enable bootstrap" option is enabled.

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

  • Posts: 4753
  • Thank you received: 644
  • MODERATOR
9 years 1 week ago #221232

Hello,

It appears that some Css code can solve this, are you able to custome your css code yourself?

If you know Css code, folllow this step to custom your css code:

Components -> HikaShop -> Configuration



Click on Display tab



Select Css



In Css part : select custom for your front-end CSS file



And click on the little pen to edit your code



Don't write in the middle of your css code, put your new code at the end of your file



On the example screen, you can see :

@media only screen and (max-width: 400px) {
your selector for your two elements {
certainly a margin-right order can be useful
}
}

@media command able you to define css rules only under 400px width screen, and so replace it with same width where troubles appears.
Hope that will help you

Regards,

Attachments:
Last edit: 9 years 1 week ago by Philip.
The following user(s) said Thank You: ralfmason

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

  • Posts: 18
  • Thank you received: 1
9 years 6 days ago #221476

Hi Philippe,

Yes that worked. The code I had to use to get acceptable behaviour across the different resolutions was:

@media only screen and (max-width:768px)
{
#hikashop_checkout_login_left_part, #hikashop_checkout_login_right_part{
width: 100%;
}
.t3-content {
width: 100%;
}

.t3-sidebar {
width: 100%;
}
}

Thanks for your help.

It did occur to me that the other solution was to hide the two side bar modules (basket and newsletter) on the check-out page but I couldn't see a way to do this in the HikaShop configuration.

Thanks

Ralf

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

Time to create page: 0.105 seconds
Powered by Kunena Forum