Product image displaying very small

Hi, Webflow community!

I’m near completion on my first Webflow site for my soon-to-be-launched business. Looking to tidy up some final areas, and having some trouble - so I appreciate everyone’s ability to bear with me through this :smiley:

Read-Only Link

I have a couple of issues - but I will start with 2 major issues:

1. For some reason, the images on my product page are displaying very small - unsure of why

2. I have these large spaces in between sections on my “What is atomicSol” page. You’ll see them as you scroll down and these spaces are not as prevalent on the editor. I attached a couple of screenshots as an example

All in all, appreciate any help as always :heart:

Edit: I was able to solve number 1 haha

Still unsure of these large spaces between text and images on the live site, that aren’t showing at the same scale on the editor - hoping to hear some thoughts on this

Thanks, again!

Hello there @Kevin_Merisanu!

I think that you have these large spaces in between sections because you’re setting the top and bottom padding with Viewport Width (VW).

spacing

My suggestion is that you change that to VH or another type of unit.

1 Like

Hi @vkoetz

Thanks for the reply! That worked! I have some overlap from the top image as I scroll but I can continue to play around with that

Do you have any suggestions/ideas as to why the image on the product pages are coming out small? The home pages product images seem to be at full size

Thanks again!

1 Like

I find some things are now overlapping, is that all because of how I have the spacing?

Thanks again for all the help! You’re a gem @vkoetz

1 Like

Wow! Glad it helped!

So, about the images I think the main problem is that you only have set the max height and if you upload an image that is smaller than 500px it’ll have the size of the uploaded image.

Another problem that might be contributing is that the images have a big transparent space that surrounds the object… You’re setting the image to have 500px but the part that’s been shown is only like 200px… Maybe it would be better if you edit those imagens first, then upload to Webflow.

1 Like

About the overlapping:

I think you’re using too many grids… Would be better if you trade that structure and start using more divs…

1 Like

Will give this a try! :smiley:

1 Like

Ah, okay - makes sense. The template I used was built, it seems, using more of a grid layout. Is the change here one that is made by taking items out of the grid for some re-structuring? I did have it at one point, properly set. However, that was with the previous margin settings so now that I have corrected them, I’ll have to fix this area

1 Like

Hi Kevin,
I don’t want give you a problem but I find another strange view.

. The grid system could be a problem.

K.

1 Like

Hi @kaiser!

Yea, I just saw that haha. All the headings are connected, so upon changing the spacing it adjusted all pages.

The grid system was built into the template, so I think my option is to now carefully work within it and individually space each item. Right now all the classes are connected, is there a way to make each heading separate? So when I begin to adjust, it doesn’t do it globally.

Thanks for the reply :smiley:

Hey @vkoetz - sorry to bug ya

I’m still having some issues with the main product page and images being small. When I click through, it shows at a good size but that initial page is still not coming out right.

Not 100% sure how to fix this, would I maybe be able to invite you as a collaborator or you can show me with a quick screen record? Either way - appreciate all the help!! :slight_smile:

Hi @Kevin_Merisanu!

Not sure where you’re having the bug, but I found a small image on Fitness page.

To fix that you should set the Collection Item Width to 100%:

If you’re having this problem on another page, show me where so I can try to help you.

1 Like

It worked!! You are a wizard my friend!

One major issue I have is with these Image Wrappers (they were built in with the template) so what is the suggested, or in your opinion, best practices with images and image wrappers?

I’m sure you notice the large white image spaces (as on the fitness page), so do I need to have an image within each image wrapper? Leaving the image wrapper empty and only having the image populated?

You have two options in my opinion:

  • Set the bg color of the Image Wrapper to transparent instead of white;
  • Create a combo class to the Image Wrapper to hide whenever you’re don’t have an image to put inside.
1 Like