How to resize an image within a container?

Hi there, I’m struggling to resize an image. I dragged a layout to my web (probably a flex container?) then when I uploaded my image, it looks like this.

But what I really want is something like this,

I want the image to be larger and position a little lower. However, I tried several attempts to adjust the size of both the container and the image and still can’t figurer out the problem.

I’m new to webflow and it is my first time building a website. Can someone help me please?

Thanks!

do you have a view only link?

Yes here it is https://preview.webflow.com/preview/mys-superb-project-0cfbfa?utm_medium=preview_link&utm_source=designer&utm_content=mys-superb-project-0cfbfa&preview=6db43329b3fba945287e2e0e80f9c8e9&mode=preview

link goes to a 404. can you create a new one?

That’s weird. Try this again? https://preview.webflow.com/preview/mys-superb-project-0cfbfa?utm_medium=preview_link&utm_source=designer&utm_content=mys-superb-project-0cfbfa&preview=6db43329b3fba945287e2e0e80f9c8e9&mode=preview

look video , i have try rebuild again and use div block

1 Like

There’s a few ways to do this. Try this:

  • Delete the Flex Container and replace it with a regular Div Block. The Flex Container is set to a max-width that makes responsive designs easier. However, it creates restrictions.

  • Change the Div Block layout to Flexbox and center it horizontally. You can also change the width to 80vw, which is 80% of the entire view-width of whatever device is being used

  • Transfer the text and image from the old Flex Container to the new Div Block in their respective columns. Take the image out of its container and remove the 500% width and height.

You can also set the image container to be Absolute positioning which would allow you to position and resize the image without any bounds, however, this can get tricky if you’re unfamiliar.

2 Likes

Or just follow @guoshuzhang video :smile:

Hi

Try Grid. A Webflower’s best friend :slight_smile:

https://www.loom.com/share/44b92a1dfe5b451d83de8442482c5f45

1 Like

Hi everyone! Sorry for the late reply. I read through all the solutions and also spent time to try each of them on my own. I think I managed to make the layout I wanted now, using the grid option. Though the preview looks good (like this)

The edit page looks a bit odd though (like this)

Not sure why the two version do not look consistent. (Perhaps there’s something else I did wrong)

Anyway, at least the preview looks good :slight_smile: Thanks so much everyone, for your help on this.

Hi

Make sure your read only link is still validate. It returns 404 :wink: