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!) Webflow - Directorie
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
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.
- In LucilleBlock, select Grid 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.
- Set the width on Grid 2 to 100%
- Inside Div block 15, select LucilleBlocky and set it’s width to 100%
- Select Div block 12, remove the 300px width and set the width to 100%
- Select Grid 2 and add 10px padding to the left and right sides
For the second image
- 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:
- In LucilleBlock, select Div block 15 and remove any padding
- Inside of Div block 15, select LucilleBlocky and change the width from 500px to 100%
- 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:
- 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.
Thanks for the help guys! I ended up doing a combo of the suggestions and it looks great now. Thanks again.