TheDukeOfHurl Posted December 31, 2018 Share Posted December 31, 2018 Hello! When I list a new product in our shop, the 'main' product image appears much larger than I'd like it to (please see the attached printscreen). Is there a way I can adjust this so it appears smaller? Thanks! Link to comment Share on other sites More sharing options...
♥14steve14 Posted December 31, 2018 Share Posted December 31, 2018 What version of oscommerce are you using as it will make a differentce to how the images are handled, and how large was the image that you uploaded, and what size do you want the image. . REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
♥JcMagpie Posted December 31, 2018 Share Posted December 31, 2018 3 hours ago, TheDukeOfHurl said: Is there a way I can adjust this so it appears smaller? Just use a little css. Find the class for the image. In BS it is image-fluid and just change the % to what you are happy with. In BS the image size will change depending on width you set for the module in admin! 12 is full width large image set to 6 half width smaller image it also depends on what size the image is to begin with. .img-fluid { max-width: 100%; } Link to comment Share on other sites More sharing options...
♥JcMagpie Posted December 31, 2018 Share Posted December 31, 2018 Sorry the class you should use is ".piGal" as .imag-fluid will affect other parts of the website also. so use .piGal { max-width: 100%; } Link to comment Share on other sites More sharing options...
♥raiwa Posted December 31, 2018 Share Posted December 31, 2018 Without knowing more details, your shop seems to use a template, so it depends on the coding the template uses to define the image space/size. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥raiwa Posted December 31, 2018 Share Posted December 31, 2018 @TheDukeOfHurl, Hello Todd, <link rel="stylesheet" type="text/css" href="ext/rwdgrid/rwdgrid.min.css" /> and <div class="grid-m-12 grid-t-7 grid-tl-9 grid-d-8"> shows that you are using a third party template which is not supported here in the forum. You should ask your template provider for help. Just a small hint: search for the definition of the image size and reduce it. It shows in your source code: <img src="images/Alien_Covenant_Cov_Large.jpg" alt="" width="330" height="500" id="piGalImg_1" /> About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥JcMagpie Posted December 31, 2018 Share Posted December 31, 2018 Simple css fix, Your still using stock image gallery just add to your user.css. You can mod as you like. #piGal { max-width: 50%; } Link to comment Share on other sites More sharing options...
♥raiwa Posted December 31, 2018 Share Posted December 31, 2018 #piGal { max-width: 50%; } Sorry, but it's not a useable solution: - blank space between image and text! - image half screen width on mobile view! - double image size than required! ... About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 2, 2019 Share Posted January 2, 2019 On 12/31/2018 at 1:59 PM, raiwa said: Sorry, but it's not a useable solution I'm sure the OP is capable of deciding this for him self. You may not like the solution but that’s fine. It’s only a suggestion not a must do! Anyway it worked fine on my test site but thank you for your input. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 2, 2019 Share Posted January 2, 2019 If the mobile view is important and it may well be, then simply limit the % reduction to large screens only! A simple change to the css is all that is required. Now the mobile view is normal again. Win Win 😊 Adjust as you like. .piGal { max-width:50%; } @media (max-width: 800px) { /* CSS that should be displayed if width is equal to or less than 800px goes here */ .piGal { max-width:100%; } } Link to comment Share on other sites More sharing options...
♥raiwa Posted January 2, 2019 Share Posted January 2, 2019 First you can make it more "simple": @media (min-width: 800px) { /* CSS that should be displayed if width is more than 800px goes here */ .piGal { max-width:50%; } } and I believe for mobile (xs) it should be the width of the breakpoint the OPs template is using. We do not know which it is. Then I mentioned 3 problems inherit in your "suggestion", you solved only one. Anyway, it's not a question of "winwin", its a question to give useable and correct answers. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 2, 2019 Share Posted January 2, 2019 29 minutes ago, raiwa said: Then I mentioned 3 problems inherit in your "suggestion", you solved only one. Look a little harder @raiwa I'm sure you will find more. 😂 Link to comment Share on other sites More sharing options...
♥JcMagpie Posted January 2, 2019 Share Posted January 2, 2019 44 minutes ago, raiwa said: First you can make it more "simple": are you sure? Did you try this! 😊 Link to comment Share on other sites More sharing options...
ArtcoInc Posted January 2, 2019 Share Posted January 2, 2019 On 12/31/2018 at 1:26 AM, raiwa said: Without knowing more details, your shop seems to use a template, so it depends on the coding the template uses to define the image space/size. This ... Also, what version of osC, etc. M Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.