Hello,
I’m wondering if someone can help me, I’m having an issue getting the image to fully display within the circle i created under the service section. for some reason the bottom corners get cut off? how can I display it fully? I’m sure its something simple I’m missing but cant figure it out.
https://preview.webflow.com/preview/urology?preview=b7d392e63f67267f32cc464f14b4eacc
Hi @Matty, thanks for your post! I took a look, but I cannot see what is getting cut off, see my screenshot:
Could you send a screenshot or screencast of the issue?
Thanks in advance!
Hello Dave,
Thanks for the reply, its the 1st aid bag image. The bottom left and right corners are rounded off.
I’ve attached how it should look.
Hi @Matty, I would recommend to change up this structure a bit.
Step 1: Add flex stylng to whitebox class:
Step 2: Drag a new div under the whitebox class and give it a class of iconbox (or use whatever class you want 
Step 3: Give the iconbox some flex styling
Step 4: Remove class from image
Step 5: Drag image into iconbox:
Step 6: Style iconbox class with background color of #4dbfbf, and width and height set to 90px
Step 7: Set iconbox class to radius of 60px
Step 8: At this point, you have a perfectly centered box with the image not cropped:
Step 9: Create a new div under the whitebox class, and give it a new class called Outer Ring or something like that.
Give it a flex styling:
Give it a 100px width and height:
For the Outer Ring class, give it some border and radius:
Step 10: Drag iconbox into Outer Ring Div and you have nice, centered, icon box with border
I hope this helps!
And that is why I love the webflow community/staff Thank you so much!
1 last thing, I’m not that advanced on flex, so how would I now add a heading without it using the flex grid? as when I add a header it ends up next to the circle rather then under it but still in the whitebox?
Thanks you
Matt
Hi @Matty, on the whitebox class, set the direction to column:
Now put your other content in the whitebox, above the iconbox:
Flexbox is super powerful, I recommend the Flexbox game: http://www.flexboxgame.com or check the Flexbox layouts page for ideas and examples: http://flexbox.webflow.com.
Interesting, will defiantly look more into Flexbox.
The issue that I’ve heard is that it doesn’t quite work with IE? e,g when I view the site in IE it doesn’t look how its suppose to.
Yes. IE 11 is partial support. Any prior versions of IE don’t support flexbox, so you have to use fallbacks or just not care. 
Microsoft Edge browser in Windows 10 has full support.
Is there a fix to get this to work?
Hi @matty, thanks, I might be a little confused on which part still needs help, are you referring to how to fix the layout in IE?
If so, I took a look, and here is what seemed to work better for me in IE:
https://cl.ly/3r0k1a0I032V/Screen%20Recording%202016-11-25%20at%2004.12%20PM.mov
Does this help?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
