Apple devices-problem with mobile view

Hey there,

Your website works fine at my end. Can you tell me which browser are you using? And do you have “Request Desktop Site” option turned on?

Best Regards,
Suyogya (Themeisle Support)

@suyogya, are you viewing on an iPhone? It looks OK on a desktop browser, even if you make the window narrow, but on an iPhone half of the page content is cut off. I see the behavior on an iPhone using both Safari and Chrome.

I think it has something to do with the embedded iframe, because the rest of the page is responsive, i.e., I can see the mobile menu and the footer widgets collapse correctly. Ellyn, can you try removing the width and height attributes from your iframe tag? So it looks like this:

<iframe src="https://thelilyandthesparrowinc.cloverdonations.com/online-giving/"></iframe>

Then use a CSS plugin to add this CSS rule:

iframe {
   width: 100%;
   min-height: 700px;
}

Hey there,

As @crouchingbruin already suggested, iframe is the suspect here. I’d suggest you to follow @CrouchinBruin’s solution to make width: 100%. To add custom CSS, I’d recommend you to use this plugin. Hope it helps.

Thanks for your help. I followed all of the instructions that both of you gave by removing the width and height attributes, downloading the custom CSS plugin, and adding the CSS rule, but it still looks the same from my iphone and gives me the cut off screen.

Any other suggestions?

Hey there,

This is an issue with the embedded iframe, and as much as I would love to help with some custom code, that is beyond the support offered for our products, which consists of bug fixing and theme documentation.

However, if you need help with your customization, we recommend codeable: https://codeable.io/