Return to previous page

Increase image size, remove shadow on box + add text below product price

This topic has 10 replies, 2 voices, and was last updated 8 years, 1 months ago ago by Jack Richardson

netmined

Member

March 22, 2016 at 08:24

Hello,

Could you please advise how to remove the shadow effect on the box (container) layout view and to increase the size of the product pictures on the listing pages – on the category and all other pages where multiple products are listed together?

I know that the width of the image is somewhat restricted by the overall size of the container but right now there are still large gaps in between the individual product images when they appear side by side and these gaps could be reduced. Could you please advise how to increase the width and length of the images on those pages?

I also need to add specific text to appear below the price on every individual product page – is there a way to be able to do this?

Many thanks in advance for your assistance

#118359 Copied

9 Answers
Jack Richardson

Support staff

March 22, 2016 at 08:57
Hello,

To remove box shadow add this code in custom.css file:
```
.wrapper-boxed .containerInner {
    box-shadow: none;
    -webkit-box-shadow: none;
}
```
If you change images sizes via css your pictures may be distorted, try to use this code and check:
```
#products-grid.products_grid .product-grid img {
   width: 300px !important;
}
```
Unfortunately there is no option to add text under price. You have to edit source files or search for some plugin.

Best regards,
Jack Richardson.
#118365 Copied
netmined

Member

March 22, 2016 at 13:05

Many thanks Jack.

If the height is adjusted proportionally as well as the width, would that stop the distortion?

What would be the code to adjust both? Do you know what the height and width are currently set to?

#118421 Copied
Jack Richardson

Support staff

March 22, 2016 at 15:44
Hello,

Please try to use this css code:
```
#products-grid.products_grid .product-grid {
   height: 400px;
}
#products-grid .product-image {
    height: 320px;
}
#products-grid.products_grid .product-grid img {
    width: 300px;
    height: 300px !important;
}
.product-image .img-wrapper {
    height: 320px;
}
#products-grid.products_grid .product-grid .product-image:hover {
    height: 320px !important;
}
```
Best regards,
Jack Richardson.
#118439 Copied
netmined

Member

March 23, 2016 at 07:31

Hi Jack,

Many thanks for that. I tried the second lot of code you sent. Some images distorted, others were fine but almost all were elongated. What are the Blanco resolution settings for those product image boxes?

In the code you gave me above, you seemed to have the image dimensions as 320px high x 300px wide.
Can you give me the default Blanco theme dimension sizes, I’ll try to see if I can make the increase proportional to those.

Thanks again

#118532 Copied

Jack Richardson

Support staff

March 23, 2016 at 08:44

Hello,

The default sizes are 220px * 220px. I just gave you custom size value. You can change it to any you wish.

Best regards,
Jack Richardson.

#118541 Copied

netmined

Member

March 23, 2016 at 10:00

Many thanks for that. Do you know if Blanco has a separate default or minimum resolution setting for the pictures? I noticed that regardless of size, some stayed sharp while others blurred.

#118561 Copied

Jack Richardson

Support staff

March 23, 2016 at 11:05

Hello,

All your original images should have similar sizes. Try to change them in photoshop and reupload the images for your products.

Best regards,
Jack Richardson.

#118571 Copied

netmined

Member

March 23, 2016 at 11:46

Hi Jack,

That bit I’m ok with just want to check before I adjust the images what the resolution settings for the theme are. In some themes these are different to the image box dimensions.

#118577 Copied

Jack Richardson

Support staff

March 24, 2016 at 15:26

Hello,

There are no special resolution settings for the theme.
On our demo we used images with original sizes 1,500px × 1,500px.

Best regards,
Jack Richardson.

#118780 Copied
Viewing 10 results - 1 through 10 (of 10 total)