CODEWITHSUNDEEP
cssimageflexbox
Adam Lavery
Adam Lavery

Reputation: 210

Flexed images shrinking unexpectedly when padding applied

Having an issue with content with floated images and text that is now deep inside a flex container (wasn't in previous site). See here for example: https://m2.alocalprinter.shop/products/flyers-leaflets/flyer-printing

Scroll down to the description below the products. The floated icons next to the text should be 60x60px with 20px right padding and variable bottom padding. But they are rendered at 40x40px. If I increase image width to 80px then it renders at 60px. For whatever reason flex is setting the image width to width minus padding. Only way I have found to correct this is to switch from padding to margin then it behaves as expected. For example, first icon using margin instead of padding:

enter image description here

Problem is that would require us to go through all the content to make this change. I've tried to reproduce this on CodePen but with a simple layout it doesn't happen. Must be something to do with the more complex layout of a real page. I've tried everything I can think of and have found but nothing other than using margin instead of padding fixes it.

Can anyone see a way to fix this flex bug with CSS rather then having to change all the content to workaround it?

Yes there are better ways to lay out the content but what's been done is what worked perfectly well before and suits the skills of staff that manage the content day-to-day.

Upvotes: 0

Views: 104

Answers (1)

Dakshank
Dakshank

Reputation: 711

@Adam Because there is box-sizing property applied by default. So in this case you can initialize image box-sizing: initial; by adding css for images.

so this will help you.

.category-below-description img {
    box-sizing: initial;
}

Upvotes: 1

Related Questions