[Skip to main content](#vessel-content) # How to make product page responsive ## - **[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")** - [![huwhuw's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar35272.jpg)](/forum/user/35272-huwhuw "View huwhuw's Profile") - [ Offline](/forum/user/35272-huwhuw) Less More - Posts: 84 - Thank you received: 9 - - 11 years 5 months ago - 11 years 5 months ago [\#203135](#203135) by [huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile") Replied by *[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")* on topic *[How to make product page responsive](/forum/26-product-category-display/873665-how-to-make-product-page-responsive?start=20#203135 "-- HikaShop version -- : 2.3.4 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4 -- Browser(s) name and version -- : Google Chrome Hi, I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have: element.style { height: 400px; text-align: center; clear: both; } and inside the element style: element.style { position: relative; text-align: center; clear: both; width: 264px; margin: auto; } where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels? Thanks")* This works with yootheme templates Code: @media only screen and (max-width: 1024px) { .hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product {width: 100% !important;} } @media only screen and (min-width: 1024px) { .hikashop_product_left_part { width: 30%; margin-right: 50%; } } Last edit: 11 years 5 months ago by [huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM2NjUtaG93LXRvLW1ha2UtcHJvZHVjdC1wYWdlLXJlc3BvbnNpdmU/c3RhcnQ9MjAmdG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[sven@simplyweb.es](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile")** - [![sven@simplyweb.es's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile") Topic Author - [ Offline](/forum/user/8795-sven-simplyweb-es) Less More - Posts: 47 - Thank you received: 0 - - 11 years 5 months ago [\#203557](#203557) by [sven@simplyweb.es](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile") Replied by *[sven@simplyweb.es](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile")* on topic *[How to make product page responsive](/forum/26-product-category-display/873665-how-to-make-product-page-responsive?start=20#203557 "-- HikaShop version -- : 2.3.4 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4 -- Browser(s) name and version -- : Google Chrome Hi, I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have: element.style { height: 400px; text-align: center; clear: both; } and inside the element style: element.style { position: relative; text-align: center; clear: both; width: 264px; margin: auto; } where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels? Thanks")* thanks - warp6 or warp7 ? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM2NjUtaG93LXRvLW1ha2UtcHJvZHVjdC1wYWdlLXJlc3BvbnNpdmU/c3RhcnQ9MjAmdG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")** - [![huwhuw's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar35272.jpg)](/forum/user/35272-huwhuw "View huwhuw's Profile") - [ Offline](/forum/user/35272-huwhuw) Less More - Posts: 84 - Thank you received: 9 - - 11 years 5 months ago [\#203576](#203576) by [huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile") Replied by *[huwhuw](/forum/user/35272-huwhuw "View huwhuw's Profile")* on topic *[How to make product page responsive](/forum/26-product-category-display/873665-how-to-make-product-page-responsive?start=20#203576 "-- HikaShop version -- : 2.3.4 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4 -- Browser(s) name and version -- : Google Chrome Hi, I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have: element.style { height: 400px; text-align: center; clear: both; } and inside the element style: element.style { position: relative; text-align: center; clear: both; width: 264px; margin: auto; } where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels? Thanks")* Warp 7 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM2NjUtaG93LXRvLW1ha2UtcHJvZHVjdC1wYWdlLXJlc3BvbnNpdmU/c3RhcnQ9MjAmdG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[sven@simplyweb.es](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile")** - [![sven@simplyweb.es's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile") Topic Author - [ Offline](/forum/user/8795-sven-simplyweb-es) Less More - Posts: 47 - Thank you received: 0 - - 11 years 5 months ago [\#203638](#203638) by [sven@simplyweb.es](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile") Replied by *[sven@simplyweb.es](/forum/user/8795-sven-simplyweb-es "View sven@simplyweb.es's Profile")* on topic *[How to make product page responsive](/forum/26-product-category-display/873665-how-to-make-product-page-responsive?start=20#203638 "-- HikaShop version -- : 2.3.4 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4 -- Browser(s) name and version -- : Google Chrome Hi, I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have: element.style { height: 400px; text-align: center; clear: both; } and inside the element style: element.style { position: relative; text-align: center; clear: both; width: 264px; margin: auto; } where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels? Thanks")* Thanks - I know it's not a problem with warp 7 as it is a complete different framework - question was about warp 6 - thanks anyway Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM2NjUtaG93LXRvLW1ha2UtcHJvZHVjdC1wYWdlLXJlc3BvbnNpdmU/c3RhcnQ9MjAmdG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[bigchumpy](/forum/user/7427-bigchumpy "View bigchumpy's Profile")** - [![bigchumpy's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/7427-bigchumpy "View bigchumpy's Profile") - [ Offline](/forum/user/7427-bigchumpy) Less More - Posts: 31 - Thank you received: 0 - - 11 years 4 months ago [\#204535](#204535) by [bigchumpy](/forum/user/7427-bigchumpy "View bigchumpy's Profile") Replied by *[bigchumpy](/forum/user/7427-bigchumpy "View bigchumpy's Profile")* on topic *[How to make product page responsive](/forum/26-product-category-display/873665-how-to-make-product-page-responsive?start=20#204535 "-- HikaShop version -- : 2.3.4 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4 -- Browser(s) name and version -- : Google Chrome Hi, I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have: element.style { height: 400px; text-align: center; clear: both; } and inside the element style: element.style { position: relative; text-align: center; clear: both; width: 264px; margin: auto; } where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels? Thanks")* Does anyone have more specific info on this? It doesn't explain how to do this. Shane Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM2NjUtaG93LXRvLW1ha2UtcHJvZHVjdC1wYWdlLXJlc3BvbnNpdmU/c3RhcnQ9MjAmdG1wbD1tYXJrZG93bg==) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86359 - Thank you received: 14296 - - 11 years 4 months ago [\#204538](#204538) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[How to make product page responsive](/forum/26-product-category-display/873665-how-to-make-product-page-responsive?start=20#204538 "-- HikaShop version -- : 2.3.4 -- Joomla version -- : 3.3.6 -- PHP version -- : 5.4 -- Browser(s) name and version -- : Google Chrome Hi, I updated Hikashop and now would like to make the prodcut page responsive with the template. But on joomla33.volkan-watches.com/watches/male-collection inside hikashop_container > hikashop_subcontainer hikashop_subcontainer_border I have: element.style { height: 400px; text-align: center; clear: both; } and inside the element style: element.style { position: relative; text-align: center; clear: both; width: 264px; margin: auto; } where are the settings for those element style - or how do I achieve that I simply want to display 3 watches in a row without specifying the widht or height in pixels? Thanks")* Hi, This post [ www.hikashop.com/forum/product-category-...sponsive.html#203135](http://www.hikashop.com/forum/product-category-display/873665-how-to-make-product-page-responsive.html#203135) tells you what CSS to add on your website. Here is a tutorial explaining how to add custom CSS to HikaShop: [ www.hikashop.com/support/support/documen...ize-the-display.html](http://www.hikashop.com/support/support/documentation/153-customize-the-display.html) So with both of these, you should have everything you need. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM2NjUtaG93LXRvLW1ha2UtcHJvZHVjdC1wYWdlLXJlc3BvbnNpdmU/c3RhcnQ9MjAmdG1wbD1tYXJrZG93bg==) 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.059 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)