2

I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library.

In desktop I had to change some animations because they increased the width the page, with a horizontal scrolling. For the mobile I have the same issues, but now I don't understand if the problem is caused from the animations or something else, I see the navbar larger.

Here is the link: https://doc.digitalsolutioner.com/

I've tried to fix wider elements like the navbar, but the issue remains. I have seen in other issues similar about rows without containers, but it's not the case.

I want to have the right width on the mobile, with no horizontal scrolling.

Screenshot with horizontal scrolling on mobile

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
CarlVarsh
  • 53
  • 10
  • What you mean by _I see the navbar larger._ ? give image where you got problem, i don't see any problem in your website – Nisharg Shah Jun 13 '19 at 01:23
  • Hi @NishargShah , thanks for comment. I added a screenshots about the horizontal scrolling on the mobile, don't you see that? The page is too wide. It could be the animations that increase the width, but I wouldn't want to deactivate them. – CarlVarsh Jun 13 '19 at 08:09
  • `fade-left` creates problem, so remove it or set initial state of your element – Nisharg Shah Jun 13 '19 at 09:15
  • @NishargShah Yes you are right, I change the fade-left property and now it's ok. It's a shame because in the desktop it was fine as an animation. Thanks! – CarlVarsh Jun 14 '19 at 08:14
  • I added answer of it, check it out – Nisharg Shah Jun 14 '19 at 08:22

2 Answers2

1

the culprit is the following class inside the footer... to check: go to the bottom of the page; do inspect element; remove this property (in browser developer tools) to see how it is causing the horizontal scroll to appear

[data-aos^=fade][data-aos^=fade].aos-animate
{   transform: translateZ(0);   }

simplest way to solve this will be to hide overflow-x property against your body. This css will be the simplest way to get the fade effect without seeing the scroll at the bottom:

body {
    overflow-x: hidden;
}

Update: on mobiles and mobile emulators, a horizontal bar appears... this was due to margins on the card-service class, just remove the margin-left and margin-right properties in the media-query (as shown below) to resolve this.

@media (max-width: 576px){
  .card-service {
     /* margin-left: 15px; */
     /* margin-right: 15px; */
     margin-bottom: 25px !important;
  }
}
Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • Hi @AkberIqbal I see the property in the css, caused by the fade-left animation. If I put the overflow-x in the body the situation is the same in the mobile, I had to replace the fade-left animation. Thanks for the answer! – CarlVarsh Jun 14 '19 at 08:19
  • can you try adding this to your `` or check here for more: https://stackoverflow.com/questions/4192277/disable-horizontal-scroll-on-mobile-web – Akber Iqbal Jun 14 '19 at 09:01
  • hi @CarloVarchetta, I see what you meant... updated the answer based on your specific case; Good luck :) – Akber Iqbal Jun 15 '19 at 04:18
1

In AOS there is problem, when you cant set initial position of your element, Its set to the default position.

Like in fade-left default position is right: 0 so whenever you call fade-left its start from 0 and its create screen overflow.

So there is two option here,

  1. Don't use fade-left
  2. Set initial value of the element
Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73