Jump to content
Latest News: (loading..)
TheDukeOfHurl

Product Image Appearing Too Large...

Recommended Posts

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!

Capture.JPG

Share this post


Link to post
Share on other sites

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

Before installing the official version of oscommerce first look at a responsive version here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites
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%;

}


 

Share this post


Link to post
Share on other sites

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%;

}


 

Share this post


Link to post
Share on other sites
@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" /> 

Share this post


Link to post
Share on other sites
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.

image.thumb.png.bef1ca92ee55fde01bc69ed4a372f877.png


 

Share this post


Link to post
Share on other sites

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%;
 }
}

image.thumb.png.fc60dc076bc8d8ddc7e74c34837fb4ee.png


 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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. 😂


 

Share this post


Link to post
Share on other sites
Posted (edited)
44 minutes ago, raiwa said:

First you can make it more "simple":

are you sure? Did you try this! 😊

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites
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


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Frozen" release here

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×