[Skip to main content](#vessel-content) # Checkout Layout Issue at iPad Mini Resolution ## - **[ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile")** - [![ralfmason's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/28851-ralfmason "View ralfmason's Profile") Topic Author - [ Offline](/forum/user/28851-ralfmason) Less More - Posts: 18 - Thank you received: 1 - - 10 years 11 months ago [\#220755](#220755) by [ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile") *[Checkout Layout Issue at iPad Mini Resolution](/forum/27-checkout/880489-checkout-layout-issue-at-ipad-mini-resolution#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.")* was created by *[ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile")* -- 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. - [ ![checkout_overlapping_degradation.png](/forum/attachment/27701) ](/forum/attachment/27701 "...egradation.png") [ ](/forum/attachment/27701?download=1 "...egradation.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MDQ4OS1jaGVja291dC1sYXlvdXQtaXNzdWUtYXQtaXBhZC1taW5pLXJlc29sdXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 10 years 11 months ago [\#220777](#220777) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Checkout Layout Issue at iPad Mini Resolution](/forum/27-checkout/880489-checkout-layout-issue-at-ipad-mini-resolution#220777 "-- 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 ? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MDQ4OS1jaGVja291dC1sYXlvdXQtaXNzdWUtYXQtaXBhZC1taW5pLXJlc29sdXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile")** - [![ralfmason's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/28851-ralfmason "View ralfmason's Profile") Topic Author - [ Offline](/forum/user/28851-ralfmason) Less More - Posts: 18 - Thank you received: 1 - - 10 years 11 months ago [\#220885](#220885) by [ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile") Replied by *[ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile")* on topic *[Checkout Layout Issue at iPad Mini Resolution](/forum/27-checkout/880489-checkout-layout-issue-at-ipad-mini-resolution#220885 "-- 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 Xavier, yes the "enable bootstrap" option is enabled. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MDQ4OS1jaGVja291dC1sYXlvdXQtaXNzdWUtYXQtaXBhZC1taW5pLXJlc29sdXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 654 - - 10 years 11 months ago - 10 years 11 months ago [\#221232](#221232) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[Checkout Layout Issue at iPad Mini Resolution](/forum/27-checkout/880489-checkout-layout-issue-at-ipad-mini-resolution#221232 "-- 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.")* 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 [ ![HIKASHOP_-_configuration_2015-11-19-2.png](/forum/attachment/27804) ](/forum/attachment/27804 "...15-11-19-2.png") Click on Display tab [ ![HIKASHOP_-_configuration_-_display_2015-11-19.png](/forum/attachment/27805) ](/forum/attachment/27805 "...2015-11-19.png") Select Css [ ![HIKASHOP_-_configuration_-_display_-_css_2015-11-19.png](/forum/attachment/27806) ](/forum/attachment/27806 "...2015-11-19.png") In Css part : select custom for your front-end CSS file [ ![HIKASHOP_-_configuration_-_display_-_css_-_default_2015-11-19.png](/forum/attachment/27807) ](/forum/attachment/27807 "...2015-11-19.png") And click on the little pen to edit your code [ ![HIKASHOP_-_configuration_-_display_-_css_-_default_-_edit_2015-11-19.png](/forum/attachment/27808) ](/forum/attachment/27808 "...2015-11-19.png") Don't write in the middle of your css code, put your new code at the end of your file [ ![HIKASHOP_-_CUSTOM_2015-11-19.png](/forum/attachment/27803) ](/forum/attachment/27803 "...2015-11-19.png") 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, - [ ![HIKASHOP_-_CUSTOM_2015-11-19.png](/forum/attachment/27803) ](/forum/attachment/27803 "...2015-11-19.png") [ ](/forum/attachment/27803?download=1 "...2015-11-19.png") - [ ![HIKASHOP_-_configuration_2015-11-19-2.png](/forum/attachment/27804) ](/forum/attachment/27804 "...15-11-19-2.png") [ ](/forum/attachment/27804?download=1 "...15-11-19-2.png") - [ ![HIKASHOP_-_configuration_-_display_2015-11-19.png](/forum/attachment/27805) ](/forum/attachment/27805 "...2015-11-19.png") [ ](/forum/attachment/27805?download=1 "...2015-11-19.png") - [ ![HIKASHOP_-_configuration_-_display_-_css_2015-11-19.png](/forum/attachment/27806) ](/forum/attachment/27806 "...2015-11-19.png") [ ](/forum/attachment/27806?download=1 "...2015-11-19.png") - [ ![HIKASHOP_-_configuration_-_display_-_css_-_default_2015-11-19.png](/forum/attachment/27807) ](/forum/attachment/27807 "...2015-11-19.png") [ ](/forum/attachment/27807?download=1 "...2015-11-19.png") - [ ![HIKASHOP_-_configuration_-_display_-_css_-_default_-_edit_2015-11-19.png](/forum/attachment/27808) ](/forum/attachment/27808 "...2015-11-19.png") [ ](/forum/attachment/27808?download=1 "...2015-11-19.png") Last edit: 10 years 11 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). The following user(s) said Thank You: [ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MDQ4OS1jaGVja291dC1sYXlvdXQtaXNzdWUtYXQtaXBhZC1taW5pLXJlc29sdXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile")** - [![ralfmason's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/28851-ralfmason "View ralfmason's Profile") Topic Author - [ Offline](/forum/user/28851-ralfmason) Less More - Posts: 18 - Thank you received: 1 - - 10 years 11 months ago [\#221476](#221476) by [ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile") Replied by *[ralfmason](/forum/user/28851-ralfmason "View ralfmason's Profile")* on topic *[Checkout Layout Issue at iPad Mini Resolution](/forum/27-checkout/880489-checkout-layout-issue-at-ipad-mini-resolution#221476 "-- 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 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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI3LWNoZWNrb3V0Lzg4MDQ4OS1jaGVja291dC1sYXlvdXQtaXNzdWUtYXQtaXBhZC1taW5pLXJlc29sdXRpb24/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.162 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)