Image resizing with flexbox (IE)

[grimski]

From what I’ve tested this only seems to be an issue in Internet Explorer. I did get the same issue in Firefox on Windows but updated the browser has resolved this.

Basically on resizing (shrinking) the viewport width the images in my layout break out the box. They don’t resize. It seems to work ok in Edge but not in IE11 – which has pretty good Flexbox support? Strangely it seems to work ok in IE10?!

The only think I can see that’s different is maybe align-items: center; or justify-content: center; isn’t being acknowledged in IE10 so the issue isn’t occurring.

I’ve created a CodePen, it doesn’t seem to resize/scale as well so I’ll include a direct link to the template (rest of the mark-up commented out) as well.

CodePen: http://codepen.io/moy/pen/wGLzqg

Template link: http://moymadethis.com/flex/index.html

Hope someone can help! Thanks in advance.

[I.m.learning]

How about changing the class name .features, in this:

.features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

to:
.features__item features__item–image
to match the class name you gave it

[grimski]

Ah ok, so all the ‘flex’ declarations are on the 2 child elements instead?

Sorry I’m still a bit of a n00b with flexbox. For what I normally have to support I’ve not had much of a chance to use it in anger!

Edit: unfortunately that doesn’t work, the image still stretches out of the viewport :/

[Beverleyh]

Do you mean in mobile view – when everything is stacked in a linear fashion?

The image resizes OK when .features is set to display:block; so, what if you wrap the .features block in a media query so that flexbox layout only kicks in when the screen gets wider than the images width.

Maybe 440px?

@media (min-width:440px)  { 
.features  { /* flex stuff here */ } 
}

[grimski]

Thanks @Beverleyh, that might be an approach I have to take!

The reason I’m using Flexbox on mobile is so I can center the text. Normally I’d just use text-align: center; but as I’m using an unordered list that’ll make them display uneven whereas using flexbox seems to keep the left edge aligned.

I tried applying flex: 0 1 auto; and got some joy but then the justify-content: center; seems to stop works.

Suppose I may have to compromise somewhere, unless anyone has any bright ideas?

[Beverleyh]

The reason I’m using Flexbox on mobile is so I can center the text. Normally I’d just use text-align: center; but as I’m using an unordered list that’ll make them display uneven whereas using flexbox seems to keep the left edge aligned.

Is that really an issue at such a narrow width? I can understand when the screen is wider and you want to centralise a list in a larger space while maintaining a left-alignment, but when the viewport is narrow, there isn’t really a need to centralise the list. Just let it all align left and make use of all the available space.

[grimski]

@Beverleyh not really …it’s just me being a fussy designer! ;D

But you’re right it’s not really necessary, especially given the other issues it’s causing.

It’s not ideal but I did manage to keep the centred text and also have the image resize as it should. I basically had to target only the div that container the text with flexbox and just have the image container use text-align: center;. Seems to of done the trick. Then I just add flexbox onto the container to vertically centre the 2 columns for 768+ resolutions.

I have another issue…

Which might be worth creating a new post for but it does involve flexbox so I’ll mention it here to see if I can prevent polluting the forum with more of my posts first! ;)

In regards to this: http://moymadethis.com/flex/quote.html

In IE10 the text in the container with the avatar doesn’t wrap and breaks into the next column. Anyone have any ideas on this? It doesn’t happen in the other column so I have no idea why the error’s occurring?

Thanks for the help and advice, really appreciate it!

[grimski]

Note I’m using autoprefixer so all -ms- prefixes are generated automatically. I will just note the prefix-less declarations here.

Adding the following line onto the paragraph did the trick flex: 0 1 auto;

I also had an issue where the text wouldn’t wrap in the .feature-quote__cite container. I tried adding the above which didn’t work. To fix this I had to add flex: 0 1 auto; directly onto the paragraph within the div rather than on the parent container .feature-quote__cite. Not ideal but it looks like it’s done the trick.

As an aside, in IE11 the avatar image would get squashed when there wasn’t enough horizontal space. I found adding flex-shrink: 0; to the image fixed this. Didn’t seem to cause any other issues/side-effects.

[Author]

Posts