Streaming live at 10am (PST)

Image wont fully display


#1

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


#2

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!


#3

@cyberdave

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.


#4

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 :slight_smile:

Step 3: Give the iconbox some flex styling :slight_smile:

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!


#5

@cyberdave

And that is why I love the webflow community/staff Thank you so much! :slight_smile:

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


#6

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.


#7

@cyberdave

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.

http://tinyurl.com/zhnqm5o


#8

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. :stuck_out_tongue_winking_eye: Microsoft Edge browser in Windows 10 has full support.


#9

@cyberdave

Is there a fix to get this to work?


#10

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:

Does this help?


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.