Any idea why this photos

The two photos I have sliding-in on the home page are kinda narrow when viewed on mobile. (by the way because of this forum I figured out how to stop the home page from sliding off screen!) https://preview.webflow.com/preview/directorie?utm_medium=preview_link&utm_source=designer&utm_content=directorie&preview=b9cd3df0fe0e11dae0ad9282bf0dcaf1&mode=preview

I would recommend to decrease the height of the images to about 300px and setting the images to “cover” in the “fit” settings on the mobile breakpoint

1 Like

Hi @engine7design !

I’ve gone through and done my best to provide some suggestions on how to make those two images more responsive. Take a look below:

Select the Mobile landscape breakpoint and follow the steps below for the first image.

  1. In LucilleBlock, select Grid 2
  2. Edit Grid 2, right click on the right column and delete the right column so that Div block 12 takes up the next available space and moves below the image.
  3. Set the width on Grid 2 to 100%
  4. Inside Div block 15, select LucilleBlocky and set it’s width to 100%
  5. Select Div block 12, remove the 300px width and set the width to 100%
  6. Select Grid 2 and add 10px padding to the left and right sides

For the second image

  1. Inside of Div block 15, select ImpossibleBlocky and change the width from 300px to 100%

That’s it for Mobile landscape. You can then make further adjustments to Mobile portrait by following these next steps.

For the first image follow these steps:

  1. In LucilleBlock, select Div block 15 and remove any padding
  2. Inside of Div block 15, select LucilleBlocky and change the width from 500px to 100%
  3. Inside Div block 12, select the heading and remove any padding or margin, and do the same for the paragraph (remove any padding or margine)

For the second image:

  1. Inside of ImpossibleBlock, select ImpossibleBlocky and change the width from 300px to 100%

Hopefully these steps help. This should make the image more responsive on Mobile landscape and portrait. Happy to provide more detail if you need.

1 Like

Thanks for the help guys! I ended up doing a combo of the suggestions and it looks great now. Thanks again.