Image inside a flex div

Design help General
1

Hi,
My ReadOnly site is LINK

I have an image inside a flex div. When I view the site on webflow and on Chrome devtools it shows perfectly; but when I view the site on my iPad the image of the house overflows.

I have searched forums and have implemented a width and height = 100% but it didn’t resolve the issue.

Is someone able to help me out please?
The website can viewed on Pad using this link:
https://spacestyler-2.webflow.io/

2

Can you add what you use to view the site on the ipad. and have you tried other browsers?
Then I would search for issues with what ever is causing it on this forum as I think some people have put code in to make things work.

3

Hi,
I tried Chrome browser and Safari.
My website alignment goes for a toss on iPad even though on WebFlow and Chrome devtools it shows correctly. Some of the problems I am facing on an iPad are:

  • image not covering the full width of a flex div parent even though I have mentioned 100% width and height.

  • There is a huge gap after my footer

  • Some other sections are weirdly hidden and have large extra spaces.

Any help will be very much appreciated.
Thanks.

4

Ok so chrome browser and safari have the issue?
Try Microsoft edge.
I don’t have any apple product or use chrome so I cant help you directly just help point you in the exact placement of error. I would be very surprised if it was ipad itself causing issue.
That said it could be the screen resolution and aspect ratio.

5

Hi,
Downloaded Microsoft Edge on the iPad and tested the website. It has the same issues as in Chrome and Safari browser.

6

take some screen shots and pop them up please.

7

IMG_2188
IMG_21882048×1536 164 KB
IMG_2185
IMG_21851536×2048 42.1 KB
IMG_2183
IMG_21831536×2048 132 KB

8

To me it looks like over combination of flex and grid display elements. Simply setting .body {display: block;} and .whyus {display: block;} should be sufficient to achieve expected layout on those visuals. Also if you want to resize image to match text block height try background image instead.

P.

1 Like
9

Thank you so much. Changing to .body {display: block;} fixed the issue.
I tried with background image, but it is not responsive, hence went for the flex div approach.