Checkout Layout Issue at iPad Mini Resolution

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

Hi,

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

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

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,

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