Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Product Image Appearing Too Large...


TheDukeOfHurl

Recommended Posts

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

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

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.

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

#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!

...

Link to comment
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

 

Link to comment
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

 

Link to comment
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.

Link to comment
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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...