question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AOS fade-left on all mobile responsiveness whitespace to the left Bootstrap 4

See original GitHub issue

This is:

  • Bug

Specifications

  • AOS version:2.3.1
  • OS:linux
  • Browser:chrome

Expected Behavior

animation to fade from left

Actual Behavior

it fades from left but leaves a white to the left on bootstrap

Steps to Reproduce the Problem

add this on body bootstrap 4

<div data-aos="fade-left" data-aos-duration="2000" class="col-lg-4">
					<div class="work_item">
						<a href="#">
							<h4>head</h4>
						</a>
						<p>paragraphi.</p>
					</div>
				</div>

other work fine expect this fade from left

Possible Solution

margin-left should be removed or set to zero because it creates a whitespace on css aos

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:7
  • Comments:10

github_iconTop GitHub Comments

12reactions
nicanorsuarez01commented, May 28, 2019

add overflow: hidden to the parent class

1reaction
ogunnergizalcommented, Apr 22, 2022

*{ overflow-x:clip; }

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unwanted white space on right side in mobile view
Firstly follow the above answer make sure that the width of any element should not exceed 100% and then also try this:
Read more >
Grid system - Bootstrap
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive...
Read more >
AOS - animations - CodePen
Showcase of AOS plugin, that animates elements on scroll https://github.com/michalsnik/aos... ... <div class="item" data-aos="fade-left">4</div>.
Read more >
W3.CSS Animations - W3Schools
W3.CSS Animations · W3.CSS Animation Classes · Animate Top · Animate Bottom · Animate Left · Animate Right · Fade in Elements ·...
Read more >
aos - Bountysource
Created 3 years ago in michalsnik/aos with 4 comments. It would be great if horizontal scroll makes animations too. Maybe select if an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found