How can I get an image to stay into the parent div?

What up Webflower,

Quick question So, I have a placeholder image and it’s out of the parent div. How can I get an image to stay into the parent div? Whenever I resize the screen size of the browser.

Example is here: https://preview.webflow.com/preview/brandons-spectacular-project-c645b6?utm_source=brandons-spectacular-project-c645b6&preview=7de5c9ac1ddd8a5a163fc441a06fac2f

Hey Brandon,

Looks like your Grid column setting in the Tablet viewport could be the cause?

Webflow%20%20%20Brandon%20Powell%20Personal%20Website%20Project

Hope that’s what you were referring to?
Keiran

No, Trying to fixed image from going out of my parent div. Do you see the image moving out of parent div class.

Hmmm…

Sorry Brandon, I don’t fully understand what it is you are describing??

Can you provide more detail.

Thanks
Keiran

Sorry, knk In the screenshot Screenshot - 9529f09ab7a7e28ddf47e78ab6ebd4af - Gyazo do you see how the image is push out of div class photo-here. I don’t want the image to be push under the navbar on desktop the table and mobile is alright

I’m just trying to fixed the image on desktop.

Select photo-here and set its Position to Relative:

image

This is so your photo, the child element, can be positioned relative to photo-here, the parent. You will then need to make adjustments to your photo’s sizing/positioning to fill the space. Another option would be to alter the background image of photo-here rather than embedding a photo as a child.

Cheers,
Christopher

If I do that does not make the image fixed. I want the image to be fixed to the top and bottom. So when someone scroll the content on the right to bottom you will not see empty white space where the image supposed to be.

Hey Brandon,

is this the desired effect you’re after?

You will need to adjust settings for tablet / mobile viewport.

Keiran

1 Like