Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 19, 2021 at 12:38 am #1273529
    Donkies11

    Hello Support,

    This is for the site studiothirty.com, specifically for iPhones – probably on Safari. The issue was tested with a few different versions of an iPhone; all users have the same experience.

    Here is a screenshot from an iPhone:
    https://studiothirty.com/wp-content/uploads/2021/01/IMG_74951-scaled.jpg

    Here is a screenshot from a Samsung/Andriod with Chrome:
    https://studiothirty.com/wp-content/uploads/2021/01/samsung-android-chrome.png

    The Samsung/Chrome is scaling properly.

    I went through a few recent Topics on this forum and saw the possibility of the plugin jQuery Migrate Helper temporarily fixing things. I installed it and set it for Legacy. We also have a caching plugin, W3 Total Cache. I cleared all cache after installing and setting jQuery Migrate Helper. The two screenshots were taken after installing plugin and clearing cache.

    Since jQuery Migrate Helper states it is not a fix, but a temporary solution – and it didn’t fix the scaling issue – I’ve removed it.

    Can you help me so the Color Section on the homepage scales properly for iPhones?

    I’ve placed credentials in the Private Content.

    Sincerely,
    Greg

    January 20, 2021 at 5:34 am #1273900
    Ismael

    Hey Greg,

    Thank you for the inquiry.

    What is the actual model of the iPhone that you are using where you took the screenshot? The section looks a bit taller in that screenshot compare to the section in Android. You might be able to fix it by setting a maximum height to the color section.

    @media only screen and (max-width: 767px) {
   #av_section_1 {
	max-height: 50vh;
   }
}

    You may have to replace the generic ID #av_section_1 with a custom one.

    Best regards,
    Ismael

    January 25, 2021 at 2:47 am #1275149
    Donkies11

    hello Ismael,

    My apologies for my delayed response – and thank you for yours.

    Your CSS code helped a bit; but there are still issues.
    In this screenshot, you’ll notice:

    • main menu (hamburger menu) and search icon are not loading to the right of the logo
    • within the Color Section element, the Special Heading element and the two Button elements are not loading
    • Video element (YouTube link) is not loading

    Also, you can see from the screen shot that the overlay element is going past the intended container element. I crunched my browser window (Chrome, Desktop) as narrow as it would go and got the following.
    screenshot: Screen-Shot-01-40-PM.png

    Upon inspection, this is the code creating the overlay extending too far:
    <div class="av-section-color-overlay" style="opacity: 0.3; background-color: #000000; "></div>

    However, I do not see how this would create trouble with the main menu and the buttons properly loading.

    I’ve asked some peers to check out the site and send me screenshots – If I get more information that seems helpful, I’ll post.

    Do you have some ideas that might fix the issue for iPhones (v. 12 and v. 10 were tested).

    ~ Greg

    January 25, 2021 at 12:56 pm #1275247
    maqueijan

    Sorry,
    How can I delimit the maximum width of the main menu before converting it to hamburger menu.
    Tnx

    January 25, 2021 at 7:31 pm #1275326
    Donkies11

    (just a note that someone jumped in with a question that isn’t relevant to this thread/post)

    January 26, 2021 at 8:12 am #1275411
    Ismael

    Hi,

    Thank you for the update.

    @Donkies: We noticed that you applied a unique ID to the section called #openhome. We can use that selector to fix the overlay issue by applying a maximum height to the section container.

    #openhome, #openhome .container {
	max-height: 50vh;
	overflow: hidden;
}

    This should also fix the position of the content inside the section including the buttons. Unfortunately, we cannot reproduce the mobile menu issue on a device emulation. We will forward the thread to our channel so that the rest of the moderators could check it.

    Thank you for your patience.

    Best regards,
    Ismael

    January 26, 2021 at 11:01 pm #1275578
    Donkies11

    Hello Ismael,

    I just received this report:

    iPhone 7 running latest iOS.
    – Buttons not showing on image, and image seems to be kinda tight-cropped – only her left eye and left part of her face are showing at the far left edge of the screen.
    – Video may have loaded, but controls are not visible.
    – Menu loads only when you tap-hold

    I changed vh height to 100vh since the intent was full screen for that component.

    Any ideas for getting everything to load correctly (menu, buttons) on iPhones?

    ~ Greg

    January 29, 2021 at 3:55 am #1276210
    Ismael

    Hi,

    only her left eye and left part of her face are showing at the far left edge of the screen.

    This is the only thing that I can actually see on my end and it is quite normal because the background position is set to center right. If you want to adjust the position of the background on mobile so that the subject is more visible, you can use this css code.

    #openhome {
	background-position: 70% 30% !important;
}

    I cannot reproduce the rest of the issue on a device emulation, so we might have to wait for the rest of the team so that they could check it properly.

    Best regards,
    Ismael

    January 29, 2021 at 4:50 am #1276223
    Donkies11

    Hello Ismael,

    Thank you for reporting in.

    I cannot reproduce the rest of the issue on a device emulation, so we might have to wait for the rest of the team so that they could check it properly.

    That is my experience as well. It is loading correctly on an Android phone, and iPhone simulators I test with show it working.

    However, I continually check in with various iPhone users and the following three items remains true for them:

    • main menu (burger menu right of logo) isn’t loading
    • within the Color Section element, the Special Heading element and the two Button elements are not loading
    • Video element (YouTube link) is not loading

    I know I am reiterating what i said in my first post, but sometimes things drift for me and I want to keep these three important issues highlighted.

    The image loading I think will be fixed when the three issues are resolved for iPhones, because it is loading cleanly for Android phones.

    (I was thinking of jumping ship; but your response – and hearing the possibility of a team looking into this has given me new hope. I can’t be the only one experiencing this on the planet – I haven’t pushed the code really from the default… at least, not that I’m aware of.)

    Sincerely,
    Greg

    February 1, 2021 at 4:38 pm #1276869
    Donkies11

    Hello Ismael & Support Team,

    Are you working on this issue? I’ve checked with several iPhones and the above homepage issues are happening on all of the versions. (7 through 12).

    Online iPhone replicators that I have used do not show the issue. So it seems to be something very specific to iPhoes.

    ~ Greg

    February 2, 2021 at 7:03 am #1277005
    Donkies11

    This is another plea for help…

    85% – 90% of our mobile traffic is iOS (iPhones).

    I really need to fix this – and I’m not sure what the issue is…

    February 2, 2021 at 10:25 am #1277034
    Ismael

    Hi,

    Sorry for the delay. Looks like css and js files are currently minified or compressed. Have you tried disabling that option temporarily? You may also need to disable the cache plugin while testing the site.

    Usually, errors on iOS also occurs on older versions of IE but this is not what is happening in this case — the site looks fine even on older version of IE.

    Screenshot of the site on IE: https://imgur.com/Wy5KAzr

    Best regards,
    Ismael

    February 3, 2021 at 6:00 am #1277237
    Donkies11

    Hello Ismael,

    Cache and Minify have been disabled.

    What are you now seeing on your end with iPhones (iOS) and Safari?

    ~ Greg

    February 3, 2021 at 1:07 pm #1277341
    Yigit

    Hi Greg,

    I attached a screenshot from my iphone 7plus on IOS 14.4 in private content field below :)

    Regards,
    Yigit

    February 3, 2021 at 11:45 pm #1277478
    Donkies11

    Hello Yigit,

    Confirmed on my end, too.

    Thank you – we can close this case/post.

    (It was the minify and cache creating trouble after the initial CSS code from this post was added.)

    FYI,
    Greg

    February 4, 2021 at 7:04 am #1277571
    Jordan Shannon

    Hi,
    If you need additional help, please let us know here in the forums

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Homepage element not scaling properly with iPhones’ is closed to new replies.