Mobile view is correct on Iphone but not on Android

Hi,

I’ve just finished building my website on Elements. Although I was initially hesitant, I must say that the process has been very smooth and enjoyable.

I work on a Mac, but have an Android phone. After publishing my site, everything looked perfect on the desktop. However, on my Android phone, the site only displays at about half the screen width in portrait mode. I spent over an hour trying to adjust it before thinking to test it on an iPhone. And to my surprise, on iPhone, everything appears perfectly. But interesting to note that when I rotate my Android to landscape, the display is also fine.

I wanted to bring this to the developers’ attention, as it may be an issue worth investigating. I’m not sure if there’s anything that can be done on my end, as all looks perfect on an iPhone.

Thank you,
Tatjana

I have the same problem

Interesting do either of you have a url I can see please?

I’ve run a lot of tests on both Windows and Android devices, and the only problem I’ve encountered (even in older versions of Safari iOS) is that, if there are nested elements where there’s no consistency in the (auto or full as well) vertical space, the vertical space doubles, moving the elements downward (and therefore they disappear).


I don’t know if this is the problem, but I’ve always solved it. I hope this helps regardless of this issue, as it’s not visible on modern devices.

Mine is https://soulwhisperer.one

I am willing to try again, but I’ve tried full and auto and published every time to realize it remained the same on android and then found out it was okay on iPhone.

I changed the content layout as well as each element, as I thought that I must have changed something inadvertently with the width, until it dawned on me, that it might be the type of phone I am using.

Maybe worthwhile to note, I use Firefox, but have not tried on another browser yet.

Can you upload just that page through Elements cloud for others to take look probably just the usual issues

1 Like

and this is how it looks on my android…

very similar, both not full width

Can you guide me through how to do that please?

elementsapp://downloadDocument/pIZ4YLN8QEYH

I’m watching England v Albania so will take a look after

You need to look at the average number of devices used; this helps you understand where to spend time to solve problems.

On all of these parent containers, change the content layout width to “breakpoint”.

2 Likes

not looked at your project just opened Firefox with your site and the Elements site, no float on Elements site but yours has quite a bit of float, width setting somewhere, @Doobox has pointed to some, back to football

1 Like

note to onesself, check whole page on phone, record, you can see the issue

1 Like
<iframe
  class="aspect-[16/9] rounded-lg"
  src="https://www.youtube.com/embed/JR8oxOWgNPo?si=B99nd_ECLel4LqAD"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

@tati still watching football try this html, quickly adjusted, controlling width with a container, you can adjust the aspect in here, needs some work

your html code is causing width issue with this setup, back to football

3 Likes

Hi, thanks.

I have changed it to a breakpoint, but unfortunately, it didn’t solve the problem.

I have changed the width on the content layout to breakpoint but it has unfortunately not changed it in Android.

In sizing, I have it on auto

here is the new link, if anyone wants to have a look:

elementsapp://downloadDocument/Ufr80tomI1Oq

I think it’s the size of the headings. I had to make them smaller.

1 Like