Website creation on Webflow

/

Webflow Development - Part 4

website-creation

Webflow Development - Part 4

Webflow Development - Part 4

Webflow Build-128

Now we're still seeing the straight Corners here and that's because the image is sticking out past the card if we were to hide this image for a second we do see those rounded corners on our card, so let's go ahead and select the card class again and we're going to set it to overflow hidden which basically crops everything inside it.

Webflow Build-129


So it'll always be cropped off when we do this and that way it's cropping the image to those rounded corners.

We want this card to have some kind of height and we want to make maintain this ideal ratio for the card so this is about 440 pixels wide and 400 pixels tall, so on this entire link block let's select the card and let's go ahead and give it a custom ratio and we'll do a width of 4.4 and a height of four so this is just setting the ideal size for the card but if we had a lot of text in here it can still push this card to be taller if needed.

Webflow Build-130


Let's select this content and let's give it a height of 100% so it fills all the space within the card so that should be good to go so let's go ahead and duplicate this link block we'll hit command D and now that we have three of these cards.

Webflow Build-131


If we head down to the tablet breakpoint they're still looking pretty good here but on the next breakpoint it's getting a bit too tight so with the entire um product layout selected let's go ahead and remove our columns till we have one column and that way each of these stack under each other like so and that will continue all the way down.

Webflow Build-132


Next let's go ahead and create our footer. so we'll drop in a section element we'll give this if we head to settings give it a tag of footer and let's give it a class of footer section and inside of that let's go ahead and add a container let's give this a class of footer container and let's give it a utility of container as well.

Webflow Build-133