[Skip to main content](#vessel-content) # Responsive columns using media queries ## - **[fernandes](/forum/user/24925-fernandes "View fernandes's Profile")** - [![fernandes's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/24925-fernandes "View fernandes's Profile") Topic Author - [ Offline](/forum/user/24925-fernandes) Less More - Posts: 2 - Thank you received: 0 - - 13 years 3 months ago [\#114194](#114194) by [fernandes](/forum/user/24925-fernandes "View fernandes's Profile") *[Responsive columns using media queries](/forum/2-general-talk-about-hikashop/85393-responsive-columns-using-media-queries#114194 "Hi I am new to Hikashop and I am trying to create a product list layout using Rockettheme template. I have been able to change listing_img_title.php to suit some of my needs but I can't work out how to get the template to go from 3 columns to 2 and to 1 depending on screen size. At the moment I shrinks the 3 columns then jumps to 1. How can I use media queries to set the number of columns? Thanks")* was created by *[fernandes](/forum/user/24925-fernandes "View fernandes's Profile")* Hi I am new to Hikashop and I am trying to create a product list layout using Rockettheme template. I have been able to change listing_img_title.php to suit some of my needs but I can't work out how to get the template to go from 3 columns to 2 and to 1 depending on screen size. At the moment I shrinks the 3 columns then jumps to 1. How can I use media queries to set the number of columns? Thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1MzkzLXJlc3BvbnNpdmUtY29sdW1ucy11c2luZy1tZWRpYS1xdWVyaWVzP3RtcGw9bWFya2Rvd24=) 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) - 13 years 3 months ago [\#114251](#114251) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Responsive columns using media queries](/forum/2-general-talk-about-hikashop/85393-responsive-columns-using-media-queries#114251 "Hi I am new to Hikashop and I am trying to create a product list layout using Rockettheme template. I have been able to change listing_img_title.php to suit some of my needs but I can't work out how to get the template to go from 3 columns to 2 and to 1 depending on screen size. At the moment I shrinks the 3 columns then jumps to 1. How can I use media queries to set the number of columns? Thanks")* Hi, You can do the modifications in the frontend css file via the menu Configuration > Display > CSS Use the @media tags to change the width of the columns when the width of the page is less than xx. ex: @media (max-width: 767px) { .hikashop_products .row-fluid .span4 { width: 49% !important;} } Here is some documentation about the layout customization: [ www.hikashop.com/fr/support/documentatio...ize-the-display.html](http://www.hikashop.com/fr/support/documentation/153-customize-the-display.html) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1MzkzLXJlc3BvbnNpdmUtY29sdW1ucy11c2luZy1tZWRpYS1xdWVyaWVzP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[fernandes](/forum/user/24925-fernandes "View fernandes's Profile")** - [![fernandes's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/24925-fernandes "View fernandes's Profile") Topic Author - [ Offline](/forum/user/24925-fernandes) Less More - Posts: 2 - Thank you received: 0 - - 13 years 3 months ago [\#114364](#114364) by [fernandes](/forum/user/24925-fernandes "View fernandes's Profile") Replied by *[fernandes](/forum/user/24925-fernandes "View fernandes's Profile")* on topic *[(Solved) Responsive columns using media queries](/forum/2-general-talk-about-hikashop/85393-responsive-columns-using-media-queries#114364 "Hi I am new to Hikashop and I am trying to create a product list layout using Rockettheme template. I have been able to change listing_img_title.php to suit some of my needs but I can't work out how to get the template to go from 3 columns to 2 and to 1 depending on screen size. At the moment I shrinks the 3 columns then jumps to 1. How can I use media queries to set the number of columns? Thanks")* Thanks Xavier, it works well. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1MzkzLXJlc3BvbnNpdmUtY29sdW1ucy11c2luZy1tZWRpYS1xdWVyaWVzP3RtcGw9bWFya2Rvd24=) 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.154 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)