Viewport issue... excessive page scrolling mobile view Icon stack

Support
#1

Hi!

On mobile devices my website does fit inside of the viewport for the most part. When scrolling the website from left to right no white space appears. However, when scrolling from top to bottom white space appears below the footer. I’m not certain if it appears above the header also because the website is predominantly white. How can I fix it so the page remains in place and and scrolls where necessary without the white space?

Also, I have a floating footer bar that I added to my website. I just need to make it fit inside of the viewport on mobile devices. Here is some code that I used for my other website. how can I alter it to fit here?

@media only screen and (max-width: 767px) {
   #tips, .boxfloat {
      width: 100%;
   }
}
#2

Hi There,

Please do make sure that you are using the latest version of theme and plugins. See versions here.

If you are using PRO, please check this: Try adding the following custom CSS:

html {
  overflow-x: hidden;
}

That CSS will do prevent the overflow and make it fit inside the container. If you still have issues after this, please share us your site URL so we can take a closer look.

#3

Hi, Lely!

Thanks for the code. So far it’s not working. But I am having serious theme issues and that might be why. All of my css was working, but now only some of it, I’m currently using the icon stack and I downloaded one of the demos on my website, but I can’t recall which one.

However, since I began designing my website I had been receiving errors with the youtube hero video on my homepage, the header logo not visible when stacked, among other things… I couldn’t quite put my finger on it and had been trying to get support about it for quite some time now.After activating my cdn and wp rocket caching plugin this became a bit clear with the help of Siteground’s staff.

Below are the findings:

Code:
JQMIGRATE: Migrate is installed, version 1.4.1
(index):133 Uncaught SyntaxError: Unexpected token <
(index):718 Uncaught SyntaxError: Unexpected token <
(index):739 Uncaught ReferenceError: Invalid left-hand side in assignment
(index):745 Uncaught SyntaxError: Unexpected token <
youtubebg.jpg:1 GET https://www.keianienterprises.com/wp-content/uploads/revslider/youtubehero/youtubebg.jpg 404 ()
VM901:1 i
VM901:1 ak
util.js:222 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

The youtube hero video and google map are both on my homepage. My site is ruined at present please help. https://www.keianienterprises.com I read a few articles about j query migrate and saw this on Github https://github.com/cedaro/dequeue-jquery-migrate I’m clueless. :confused:

#4

Hello There,

Thanks for updating in! It seems that you have modified the wp-index.php or wp-header.php in your child theme. Could you please send us a copy of your child theme so that we can investigate it further? I am guessing that some of your modifications has created several issues and affects other elements. If we could check the child theme files, maybe we can find the caused of this issue.

Please let us know how it goes.

#5

Hi, Ruenel!

I’m not sure how to send you a copy of the child them, but I have sent a copy of my ftp login credentials in a secure note.

#6

Hi there,

Those errors are from these,

<script>
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="chaila-scott-model">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="clothes-hanging-online">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="technology-coding">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="writing-hand">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="logo-client-E">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="logo-client-D">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="logo-client-C">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="logo-client-F">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="logo-client-A">

</script>

You can’t add images within <script> block, and the other one is this

<script>data-src="//www.youtube.com/embed/8dTzy_N0Pn4"</script>

I’m not sure what’s the purpose of it, but data-{NAME} is usually part or added as element attribute.

I’m not sure how the above codes are added but I’m certain that they aren’t from our theme and plugins. Please remove them.

The space in your footer is because it’s layout is set to be displayed in 70% width, if you wish to balance the space on both left and right, then you should add this CSS to your global custom CSS

.x-colophon .x-container {
margin: 0 auto !important;
}

OR, if you wish to remove the space making it full-width, then add this instead

.x-colophon .x-container {
width: 100% !important;
}

Hope this helps.

#7

Hi!

I have removed all of the necessary code, but the website still appears broken. Please check it on your end.

#8

Hi there,

Those errors are still there, and it’s coming from the custom codes added to your child theme’s functions.php. Especially the meta elements, it shouldn’t be added in the body. Please remove them but make sure to back it up.

And please provide screenshots of the issues you’re seeing, it looks okay now at least on my end.

And please disable the smooth scrolling while testing.

Thanks!

#9

Hi, Iam!

How do I add custom function to the body and where in the body? How can I insure they will work properly when added to the body? Which meta elements are causing problems and how can they be adjusted so they wont? Btw It’s not Okay. Please see the other thread for details. https://theme.co/apex/forum/t/when-the-header-logo-is-stacked-it-disappears-icon-stack/3752/12

#10

Hi there,

As Rad requested, could you please upload some screenshots of the problem? I’ve checked as well and don’t see the viewport issue you’ve mentioned.

You could use the WordPress wp_footer hook to add custom code before the closing body tag: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer

You can this type of custom code in functions.php of your child theme.

#11

Hi, Alexander!

The issue I’m having with viewport is on mobile. I have attached two separated screenshots. The first just shows when you scroll to the footer. The second shows how you can actually scroll beneath the footer and the white space appears.

#12

Hi there,

You mean the space below it? That’s the only difference that could I see before and after the scrolling (your screenshots).

I tried it too but it’s because iOS has that feature that over shoot the scrolling to create a rubber/bounce effect. It’s iOS feature and you can’t disable it through CSS or javascript. Plus, that empty space is equivalent to the height of browser’s utility bar (where bookmark, history button, and so on is placed) when you reached the bottom while scrolling.

Maybe what you’re doing it holding the screen and scrolling down, you’re supposed to release it for the touch event to finish.

Thanks!

#13

Thanks for your feedback. I was unaware of the bounce effect on ios. However, the viewport issue exists for lengthy words titles where they’re cut off rather than being moved to the next line. Additionally, the rev sliders that are set for my custom 404 page and email sign up page are full screen on the desktop, but not in mobile view. I have attached a few screenshots.

For some strange reason, on pages where there’s only the rev slider the floating footer bar is not displaying at 100% and does not display all items within the slider on mobile view. Below is an example of desktop version of newsletter.

#14

Hi there.

Should the title breaks into letters, that will look ugly, or should the font size smaller? It happens because the width of a single word is even wider than the layout in mobile. Please add this CSS to your global custom CSS

@media ( max-width: 767px ) {
h1, .h1 {
font-size: calc(28px + 0.5vw);
}
}

This only affects the texts shown in your screenshot (all instances of <h1>). This can’t be applied to all text especially each one has their own sizes, plus, you have typography settings.

About the two screenshots, they look like sliders (I confirmed the last one), please set them to full-screen. It looks like that because it maintains the aspect ratio instead of being full-screen. You slider setting has the fullscreen setting.

Thanks!

#15

Hi, Rad!

The global CSS did the trick to keep words inside of viewport on mobile devices. Thank you for that. Now i have a new issue where the scroll arrow and floating footer bar are cut in half. Also, the floating footer bar does not fit inside of the viewport on mobile devices. I also set the sliders to full screen and they look much better. I’ll play with the mobile settings a bit to see if I can get everything to fit properly. Right now some of the info on the sides is cut off and the button to go back home isn’t appearing on mobile.

#16

Hi again,

For your footer bar, make use of this code:

.boxfloat, #tips {
    width: 100% !important;
}

I checked the scroll to top anchor and it’s displaying fine on my end, maybe due to the opacity it’s hard to see, you can add this code in your Customizer:

.x-scroll-top.in {
    opacity: 1;
}

Hope this helps!

#17

Hi, Nabeel!

Thanks for the code above. it works perfectly for what I was trying to accomplish in mobile view. However, for some strange reason, the footer bar is still not 100% only on this page https://www.keianienterprises.com/newsletter-signup/ and any 404 error page https://www.keianienterprises.com/lo/But is fine on every other page. It’s weird. I used the color red to scribble and show where the footer bar stops on pages as such.

#18

Hi again,

Try adding the following code in your Customizer as well:

.page-template-revslider-page-template {
    padding-left: 0 !important;
}

Hope this helps!

1 Like
#19

That did the trick. Thanks so much.

#20

Glad we could help.

Cheers!

1 Like