Streaming live at 10am (PST)

Image inside a flex div

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:

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.

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.

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.

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

take some screen shots and pop them up please.

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

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.