[Skip to main content](#vessel-content) # Hikashop main image - Mobile device fit to screen ## - **[mici](/forum/user/33257-mici "View mici's Profile")** - [![mici's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33257-mici "View mici's Profile") Topic Author - [ Offline](/forum/user/33257-mici) Less More - Posts: 16 - Thank you received: 0 - - 11 years 11 months ago [\#178065](#178065) by [mici](/forum/user/33257-mici "View mici's Profile") *[Hikashop main image - Mobile device fit to screen](/forum/26-product-category-display/872766-hikashop-main-image-mobile-device-fit-to-screen#178065 "-- url of the page with the problem -- : 5.10.105.46/~yamitysb/ -- HikaShop version -- : 2.3.1 -- Joomla version -- : 3` -- PHP version -- : 5.3.28 -- Browser(s) name and version -- : ios Safari Hi, I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png) My Configuration & Template In the Configuration > Display > see bootstrap design = YES template - T3BS3 When I change in configuration > main > image > Product page image width = 200 Product page image height = 200 the problem is fixed (image attached - image_size.png) I have put this code in Configuration > Display > CSS @media (max-width: 767px) { #hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it is still does not work the final display should look like this (image attached - moible_screen_ok.png) What can I do to probably display the product image on mobile devices? Please advise Thanks M")* was created by *[mici](/forum/user/33257-mici "View mici's Profile")* -- url of the page with the problem -- : [ 5.10.105.46/~yamitysb/](http://5.10.105.46/~yamitysb/) -- HikaShop version -- : 2.3.1 -- Joomla version -- : 3` -- PHP version -- : 5.3.28 -- Browser(s) name and version -- : ios Safari Hi, I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png) My Configuration & Template In the Configuration > Display > see bootstrap design = YES template - T3BS3 When I change in configuration > main > image > Product page image width = 200 Product page image height = 200 the problem is fixed (image attached - image_size.png) I have put this code in Configuration > Display > CSS @media (max-width: 767px) { \#hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it is still does not work the final display should look like this (image attached - moible_screen_ok.png) What can I do to probably display the product image on mobile devices? Please advise Thanks M - [ ![mobile_screen_shift_R.png](/forum/attachment/20476) ](/forum/attachment/20476 "...en_shift_R.png") [ ](/forum/attachment/20476?download=1 "...en_shift_R.png") - [ ![moible_screen_ok.png](/forum/attachment/20477) ](/forum/attachment/20477 "..._screen_ok.png") [ ](/forum/attachment/20477?download=1 "..._screen_ok.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzI3NjYtaGlrYXNob3AtbWFpbi1pbWFnZS1tb2JpbGUtZGV2aWNlLWZpdC10by1zY3JlZW4/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")** - [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") - [ Offline](/forum/user/6861-mohamed-thelji) Less More - Posts: 12953 - Thank you received: 1778 - - - 11 years 11 months ago [\#178094](#178094) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[Hikashop main image - Mobile device fit to screen](/forum/26-product-category-display/872766-hikashop-main-image-mobile-device-fit-to-screen#178094 "-- url of the page with the problem -- : 5.10.105.46/~yamitysb/ -- HikaShop version -- : 2.3.1 -- Joomla version -- : 3` -- PHP version -- : 5.3.28 -- Browser(s) name and version -- : ios Safari Hi, I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png) My Configuration & Template In the Configuration > Display > see bootstrap design = YES template - T3BS3 When I change in configuration > main > image > Product page image width = 200 Product page image height = 200 the problem is fixed (image attached - image_size.png) I have put this code in Configuration > Display > CSS @media (max-width: 767px) { #hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it is still does not work the final display should look like this (image attached - moible_screen_ok.png) What can I do to probably display the product image on mobile devices? Please advise Thanks M")* Hello, The solution will just be to adapt a little more CSS code using the media query : @media (max-width: 767px) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzI3NjYtaGlrYXNob3AtbWFpbi1pbWFnZS1tb2JpbGUtZGV2aWNlLWZpdC10by1zY3JlZW4/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[mici](/forum/user/33257-mici "View mici's Profile")** - [![mici's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33257-mici "View mici's Profile") Topic Author - [ Offline](/forum/user/33257-mici) Less More - Posts: 16 - Thank you received: 0 - - 11 years 11 months ago [\#178936](#178936) by [mici](/forum/user/33257-mici "View mici's Profile") Replied by *[mici](/forum/user/33257-mici "View mici's Profile")* on topic *[Hikashop main image - Mobile device fit to screen](/forum/26-product-category-display/872766-hikashop-main-image-mobile-device-fit-to-screen#178936 "-- url of the page with the problem -- : 5.10.105.46/~yamitysb/ -- HikaShop version -- : 2.3.1 -- Joomla version -- : 3` -- PHP version -- : 5.3.28 -- Browser(s) name and version -- : ios Safari Hi, I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png) My Configuration & Template In the Configuration > Display > see bootstrap design = YES template - T3BS3 When I change in configuration > main > image > Product page image width = 200 Product page image height = 200 the problem is fixed (image attached - image_size.png) I have put this code in Configuration > Display > CSS @media (max-width: 767px) { #hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it is still does not work the final display should look like this (image attached - moible_screen_ok.png) What can I do to probably display the product image on mobile devices? Please advise Thanks M")* Hi Thanks for your replay, I have put this code @media (max-width: 767px) { \#hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it did not work. Can you help what css code I should put to make it work Thanks M Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzI3NjYtaGlrYXNob3AtbWFpbi1pbWFnZS1tb2JpbGUtZGV2aWNlLWZpdC10by1zY3JlZW4/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) - 11 years 11 months ago [\#178954](#178954) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Hikashop main image - Mobile device fit to screen](/forum/26-product-category-display/872766-hikashop-main-image-mobile-device-fit-to-screen#178954 "-- url of the page with the problem -- : 5.10.105.46/~yamitysb/ -- HikaShop version -- : 2.3.1 -- Joomla version -- : 3` -- PHP version -- : 5.3.28 -- Browser(s) name and version -- : ios Safari Hi, I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png) My Configuration & Template In the Configuration > Display > see bootstrap design = YES template - T3BS3 When I change in configuration > main > image > Product page image width = 200 Product page image height = 200 the problem is fixed (image attached - image_size.png) I have put this code in Configuration > Display > CSS @media (max-width: 767px) { #hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it is still does not work the final display should look like this (image attached - moible_screen_ok.png) What can I do to probably display the product image on mobile devices? Please advise Thanks M")* Hi, I just simulate a mobile screen on my browser and the image seems to have a correct size. Here is documenation for customizations: [ hikashop.com/support/support/documentati...ize-the-display.html](https://hikashop.com/support/support/documentation/153-customize-the-display.html) As it's a template issue, so customizations etc, we don't really support this, please contact your template provider for further details if it is a HikaShop compatible template. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzI3NjYtaGlrYXNob3AtbWFpbi1pbWFnZS1tb2JpbGUtZGV2aWNlLWZpdC10by1zY3JlZW4/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[electroadi](/forum/user/32681-electroadi "View electroadi's Profile")** - [![electroadi's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/32681-electroadi "View electroadi's Profile") - [ Offline](/forum/user/32681-electroadi) Less More - Posts: 14 - Thank you received: 0 - - 11 years 10 months ago [\#183246](#183246) by [electroadi](/forum/user/32681-electroadi "View electroadi's Profile") Replied by *[electroadi](/forum/user/32681-electroadi "View electroadi's Profile")* on topic *[Hikashop main image - Mobile device fit to screen](/forum/26-product-category-display/872766-hikashop-main-image-mobile-device-fit-to-screen#183246 "-- url of the page with the problem -- : 5.10.105.46/~yamitysb/ -- HikaShop version -- : 2.3.1 -- Joomla version -- : 3` -- PHP version -- : 5.3.28 -- Browser(s) name and version -- : ios Safari Hi, I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png) My Configuration & Template In the Configuration > Display > see bootstrap design = YES template - T3BS3 When I change in configuration > main > image > Product page image width = 200 Product page image height = 200 the problem is fixed (image attached - image_size.png) I have put this code in Configuration > Display > CSS @media (max-width: 767px) { #hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it is still does not work the final display should look like this (image attached - moible_screen_ok.png) What can I do to probably display the product image on mobile devices? Please advise Thanks M")* Hey, if you can please just tell me in which display exactly and where i can put a piece code for the product image to be smaller at small devices i can fix that. Adi Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzI3NjYtaGlrYXNob3AtbWFpbi1pbWFnZS1tb2JpbGUtZGV2aWNlLWZpdC10by1zY3JlZW4/dG1wbD1tYXJrZG93bg==) 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: 86290 - Thank you received: 14268 - - 11 years 10 months ago [\#183260](#183260) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Hikashop main image - Mobile device fit to screen](/forum/26-product-category-display/872766-hikashop-main-image-mobile-device-fit-to-screen#183260 "-- url of the page with the problem -- : 5.10.105.46/~yamitysb/ -- HikaShop version -- : 2.3.1 -- Joomla version -- : 3` -- PHP version -- : 5.3.28 -- Browser(s) name and version -- : ios Safari Hi, I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png) My Configuration & Template In the Configuration > Display > see bootstrap design = YES template - T3BS3 When I change in configuration > main > image > Product page image width = 200 Product page image height = 200 the problem is fixed (image attached - image_size.png) I have put this code in Configuration > Display > CSS @media (max-width: 767px) { #hikashop_main_image { width: 49% !important; float:right; margin:0;} } but it is still does not work the final display should look like this (image attached - moible_screen_ok.png) What can I do to probably display the product image on mobile devices? Please advise Thanks M")* Hi, The documentation link provided by Xavier explains where to add your piece of CSS code : [ hikashop.com/support/support/documentati...ize-the-display.html](https://hikashop.com/support/support/documentation/153-customize-the-display.html) There, add some @media CSS code to force the image size based on the device width: [ appendto.com/2014/03/responsive-approach-image-scaling-css/](http://appendto.com/2014/03/responsive-approach-image-scaling-css/) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzI3NjYtaGlrYXNob3AtbWFpbi1pbWFnZS1tb2JpbGUtZGV2aWNlLWZpdC10by1zY3JlZW4/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.356 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)