[Skip to main content](#vessel-content) # Adapt product columns 1 to mobile ## - **[alison](/forum/user/12341-alison "View alison's Profile")** - [![alison's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12341-alison "View alison's Profile") Topic Author - [ Offline](/forum/user/12341-alison) Less More - Posts: 39 - Thank you received: 1 - - 11 years 7 months ago [\#193976](#193976) by [alison](/forum/user/12341-alison "View alison's Profile") *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#193976 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* was created by *[alison](/forum/user/12341-alison "View alison's Profile")* -- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86289 - Thank you received: 14266 - - 11 years 7 months ago [\#193978](#193978) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#193978 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* Hi, You need to turn on the "use bootstrap design" option of the Display tab of the HikaShop configuration. This requires that the template is compatible with bootstrap. But it doesn't seem that it is the case on your website. And in that case, you're left with adding custom CSS in your joomla template to handle the responsive. For example, something like that: @media only screen and (max-width: 800px) { .hikashop_product{ width: 100% !important; } } The following user(s) said Thank You: [alison](/forum/user/12341-alison "View alison's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[alison](/forum/user/12341-alison "View alison's Profile")** - [![alison's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12341-alison "View alison's Profile") Topic Author - [ Offline](/forum/user/12341-alison) Less More - Posts: 39 - Thank you received: 1 - - 11 years 7 months ago [\#194176](#194176) by [alison](/forum/user/12341-alison "View alison's Profile") Replied by *[alison](/forum/user/12341-alison "View alison's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#194176 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* Nicolas hola, thanks for your answer, it has served me well for displaying products in a column in the mobile device. Now I need suit is the checkout. You can not purchase them because the form is not centered on the screen for editing. I await your response. thank you very much Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[alison](/forum/user/12341-alison "View alison's Profile")** - [![alison's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12341-alison "View alison's Profile") Topic Author - [ Offline](/forum/user/12341-alison) Less More - Posts: 39 - Thank you received: 1 - - 11 years 7 months ago [\#194183](#194183) by [alison](/forum/user/12341-alison "View alison's Profile") Replied by *[alison](/forum/user/12341-alison "View alison's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#194183 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* I've noticed that the images do not fit the column width to low screen resolution. As can be configured to fit in different resolutions. O devices such as iPad. attached image [ ![lapeluencasa.jpg](/forum/attachment/22977) ](/forum/attachment/22977 "lapeluencasa.jpg") - [ ![lapeluencasa.jpg](/forum/attachment/22977) ](/forum/attachment/22977 "lapeluencasa.jpg") [ ](/forum/attachment/22977?download=1 "lapeluencasa.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[alison](/forum/user/12341-alison "View alison's Profile")** - [![alison's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12341-alison "View alison's Profile") Topic Author - [ Offline](/forum/user/12341-alison) Less More - Posts: 39 - Thank you received: 1 - - 11 years 7 months ago [\#194199](#194199) by [alison](/forum/user/12341-alison "View alison's Profile") Replied by *[alison](/forum/user/12341-alison "View alison's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#194199 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* the product columns has managed following your instructions and I've also added more references pixels. As follows: @media only screen and (max-width: 1115px) { .hikashop_product{ width: 30% !important; } } @media only screen and (max-width: 948px) { .hikashop_product{ width: 50% !important; } } @media only screen and (max-width: 414px) { .hikashop_product{ width: 50% !important; } } @media only screen and (max-width: 375px) { .hikashop_product{ width: 100% !important; } } @media only screen and (max-width: 320px) { .hikashop_product{ width: 100% !important; } } You think it's a good way as this? The theme of chekout not know how to fix it, I hope your help. thank you very much The following user(s) said Thank You: [proton5](/forum/user/41183-proton5 "View proton5's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86289 - Thank you received: 14266 - - 11 years 7 months ago [\#194202](#194202) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#194202 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* You can use such CSS yes. The CSS code I gave was just a simple example. For the checkout, you'll need further CSS like the one I gave using the @media CSS system. The main thing would be to move the registration area below the login area: [ www.hikashop.com/support/support/documen...tml#registration\_box](https://www.hikashop.com/support/support/documentation/84-css-styling.html#registration_box) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[alison](/forum/user/12341-alison "View alison's Profile")** - [![alison's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12341-alison "View alison's Profile") Topic Author - [ Offline](/forum/user/12341-alison) Less More - Posts: 39 - Thank you received: 1 - - 11 years 7 months ago [\#194389](#194389) by [alison](/forum/user/12341-alison "View alison's Profile") Replied by *[alison](/forum/user/12341-alison "View alison's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#194389 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* Hello, I've been checking the display on different devices. Mobile is ok. For iPad does strange as shown in the picture I attached things, blows algundos products, I guess it's because of the height of these and not fit to not overlap must jump. How could fix it? --- --- Regarding ckekout, how do I emplementar the code you mention me alone pra Phones Devices I have a sheet for responsive CSS code, but not code or how to put it. Thank You, [ ![lapeluencasaalineacio.jpg](/forum/attachment/23034) ](/forum/attachment/23034 "...aalineacio.jpg") - [ ![lapeluencasaalineacio.jpg](/forum/attachment/23034) ](/forum/attachment/23034 "...aalineacio.jpg") [ ](/forum/attachment/23034?download=1 "...aalineacio.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86289 - Thank you received: 14266 - - 11 years 7 months ago [\#194399](#194399) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#194399 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* Hi, 1. In that case, you want to force the height of the product boxes to a height which fits to your template design. For example: .hikashop_products .hikashop_subcontainer{ height: 260px; } 2. The link I gave you tells you want CSS to add. Just add it like you added the first piece of CSS I gave you and that's it. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[proton5](/forum/user/41183-proton5 "View proton5's Profile")** - [![proton5's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/41183-proton5 "View proton5's Profile") - [ Offline](/forum/user/41183-proton5) Less More - Posts: 10 - Thank you received: 0 - - 10 years 7 months ago - 10 years 7 months ago [\#231751](#231751) by [proton5](/forum/user/41183-proton5 "View proton5's Profile") Replied by *[proton5](/forum/user/41183-proton5 "View proton5's Profile")* on topic *[Adapt product columns 1 to mobile](/forum/26-product-category-display/875552-adapt-product-columns-1-to-mobile#231751 "-- HikaShop version -- : 2.3.0 -- Joomla version -- : 2.5.8 -- PHP version -- : 5.5 Hello, I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display. My question is how do you display in 1 column on mobile? I hope you can help me. Thank you very much. regards")* Thank you. This works for me I use a similar code to fix the responsive issue in my site (template with not bootstrap support): @media only screen and (max-width: 1115px) { .hikashop_product{ width: 30% !important; } } @media only screen and (max-width: 948px) { .hikashop_product{ width: 50% !important; } } @media only screen and (max-width: 414px) { .hikashop_product{ width: 50% !important; } } @media only screen and (max-width: 375px) { .hikashop_product{ width: 100% !important; } } @media only screen and (max-width: 320px) { .hikashop_product{ width: 100% !important; } } Regards Last edit: 10 years 7 months ago by [proton5](/forum/user/41183-proton5 "View proton5's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzU1NTItYWRhcHQtcHJvZHVjdC1jb2x1bW5zLTEtdG8tbW9iaWxlP3RtcGw9bWFya2Rvd24=) 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.441 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)