[Resolved] Need help with some styling

[Matt]

Alright so on my product page in the link provided i’ve been trying to get the img file to fit correctly into the flex view port so they both change together along with different sizes of images that pop up. They can stay constrained as long as the images are visible. I like the shadow box styling and the border radius adding a nice touch to it so i’m hoping I don’t lose that. I have lots of pictures and I know I can re-size then upload again to fix the issue I just thought y’all would know how to fix this problem or maybe have a shrink to fit solution for it. Even on mobile it’s slightly off. I feel like there is another layer in there or something i’m missing. I guess i’d like to see the full image with the images border box in the view port. It would be nice to stay consistent across all platforms.

img.wp-post-image {
background: #4A4A4A !important;
border-radius: 15px !important;
box-shadow: 4px 4px 3px 0 rgba(0,0,0,0.8) !important;
border: ridge #4A4A4A 2px;
}

.flex-viewport {
padding-right: 15px !important;
margin-top: 9px;
background: #4A4A4A !important;
box-shadow: 4px 4px 3px 0 rgba(0,0,0,0.8);
border-radius: 20px;
border: ridge #4A4A4A 1px;
margin-bottom: 15px;
width: auto;
height: 100%;
}

[David]

Hi there,

do you need to keep the viewport the same size regardless of the different image sizes ?
If so this really difficult to do without causing issues with responsiveness. If you have the capacity to convert your images then i would recommend doing that as it will save a lot of aggravation.

let me know.

[Matt]

You’re right i’m gonna stop being lazy and just resize my images again before upload. I was an idiot and thought CSS would have some magic shrink to fit method (I wanted to keep high res images for zooming) but found out it doesn’t after learning it a bit. It has a shrink to crop method basically lol. Thanks for the help!

[David]

You’re welcome. Woo has a lot of factors involved. My standard steps are this:

1. work out the maximum image width you require – this is defined in Customizer > Woocommerce > Product Images and is 600px by default.
2. Zoom uses the original uploaded image size – so if i wanted x2 zoom i would upload a 1200px image for the default settings.
3. Make sure all original images are a square aspect ratio e.g 1200 x 1200px – if that means the image has to have some white (transparent) space around it then so be it. This will save a lot of headaches.

Hope that helps

[Author]

Posts