Docs

[berguy]

Hello! I’m having a few issues with content cutoff on mobile.. site is https://ejbpools.com

Everything is up to date. Not sure what I’m missing.

Also having trouble with my large monitor. When scrolling down on the “regular services” page, it does not load the FAQ. Is there a way to make things do their animation as soon as the bottom of my screen reaches them? This is also an issue in general, the animations don’t start early enough and make portions of a page seem blank.

[berguy]

To clarify a bit, a lot of my content looks squished on my iPhone SE. There’s one to two words per line on the home page. The menu button is pushed below the logo. This also happens on my iPhone 7, but it is not quite as bad. Both phones are seeing “content cutoffs” with headings being clipped on the side.

[Lely]

Hi There,

Unfortunately, I can’t duplicate the issue on Regular Services page. See the following:
Chrome:http://screencast-o-matic.com/watch/cbnX156iq6
IE:http://screencast-o-matic.com/watch/cbnX1m6iqI
FIREFOX:http://screencast-o-matic.com/watch/cbnX1K6iqF

Regarding the content being squished on mobile, that is because you have added padding on the columns. It is not recommended to use fixed padding because of responsive nature. See this: http://screencast-o-matic.com/watch/cbnX186iqT. As you can see, 100px might be good on large screen, but then on smaller screen like mobile, 100px on left and right part of the screen is too much. To control the width, we can just add max-width: 990px; on the style field of the ROW where the column is and then remove the padding on the columns.

Hope this helps.

[berguy]

Thank you so much for taking the time to make your reply. I would like to point out that the issue on the “regular service” page is actually only an issue with my large monitor (32″ 1440p). Perhaps there is a way to make the animations come up earlier in the scroll? They usually only start in the middle of the screen instead of the bottom.

Also, I will take a look at the mobile issue when I have a chance and will get back with this thread. Thank you for this as well.

[Rad]

Hi there,

Would you mind providing screenshots for these issues? I just need some idea of the differences we’re seeing.

Thanks!

[berguy]

I think it has to do with when the animation starts. If I could make the animations start a bit lower in the page that may fix this.

Thanks

[berguy]

http://imgur.com/a/GozPa

[Rue Nel]

Hello There,

Thanks for providing the screenshots. Please keep in mind that the animations will gets triggered when the column is visible in the screen. You cannot trigger the animations if the contents of the column is not visible on the page. If the animation is affecting the page, please remove the fade effects.

Hope this helps.

[berguy]

Thank you for your reply.

That is what I’m trying to show here. It is not being triggered with the larger monitor (1440p) when the column is visible like it is supposed to. Any ideas with that?

[Rad]

Hi there,

The animation is triggered by scroll position of the target element relative to viewport size ( eg. if element scroll position is greater or equal to 50% of browser height then it will trigger the animation ). And if you look at your screenshot, the hidden content doesn’t even reach the 50% of the browser height. Hence, the animation isn’t triggered.

Try adding gap element to the end of that hidden content to increase the height so it would reach the 50% of browser height.

Please note that this behavior varies on each device due to varying screen heights. If you can fix it in 32″, it doesn’t mean it’s fixed on 42″. The greater the screen size, the smaller the content size, you can disable the animation instead.

Thanks!

[Author]

Posts