Bootstrap4: Mobile animations causing slight issue with width being too wide and resulting in scrolling at the bottom

Currently, I am creating a website demo utilizing the Bootstrap Framework and AOS - Animate on Scroll library.

While working on the desktop version of the site, I encountered some animation-related challenges that caused the page width to expand, resulting in horizontal scrolling. These issues persisted when viewed on mobile devices, where the navbar appeared larger than intended.

To view the website, please visit:

I have attempted to address the problem by adjusting elements like the navbar's width, but the issue persists. Although I have come across discussions related to similar problems regarding rows without containers, this does not seem to be the root cause of my issue.

My goal is to ensure that the mobile version displays with the correct width, eliminating the need for horizontal scrolling.

cssanimationmobilebootstrap-4responsive

Answer №1

In the world of animation on scroll (AOS), a common issue arises when you are unable to set the initial position of your element, forcing it to default to its original placement.

For instance, in the case of `fade-left`, the default position is specified as `right: 0`. As a result, every time you trigger the `fade-left` effect, it starts from this point, potentially causing screen overflow.

To tackle this problem, here are two possible solutions:

  1. Avoid using the `fade-left` animation
  2. Manually define the initial value for the element

Answer №2

the guilty party can be found within the footer section of the code... to confirm, scroll down to the bottom of the page; use inspect element; remove this specific property (using browser developer tools) to observe how it triggers the appearance of a horizontal scroll.

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

the easiest solution is to hide the overflow-x property on your body tag. Implementing this CSS rule will provide the fade effect without causing a bottom scroll:

body {
    overflow-x: hidden;
}

Update: when viewed on mobile devices and emulators, a horizontal bar may become visible... the issue stems from margins applied to the card-service class. To resolve this, simply remove the margin-left and margin-right properties within the media-query (refer to the code snippet below).

@media (max-width: 576px){
  .card-service {
     /* margin-left: 15px; */
     /* margin-right: 15px; */
     margin-bottom: 25px !important;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger the change of an element upon hovering over another element

Is there a way to manipulate an element when another element is being hovered over, with the two elements structured like this: <div id="parent_element"> <div id="class-open-1"></div> <div id="class-close-1"></div> < ...

javascripthtmlcss

Arrange the list based on one of its offspring

My navigation bar consists of a first list, an image, and a second list. I am trying to center the image and position the lists around it. To better illustrate my issue, I have created a visual representation on Tailwind Playground since I am implementing ...

htmlcssflexbox

When an image is a child of the parent content and another element has opacity set, the CSS stack order will be altered

Recently, I came across an interesting issue while working with CSS, particularly with negative margins to stack elements on top of each other. I am aware of the natural stack order in which elements overlap, where the later element always appears on top ...

csscss-positionz-index

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

javascripthtmlcss

A different approach to using Bootstrap 4 instead of shinyBS::popify

My Shiny app incorporates Bootstrap 4 with the help of the bslib package. Unfortunately, the popovers created using shinyBS::popify are not functioning as expected. Is there an alternative method or a solution to make them work properly? library(shiny) l ...

rtwitter-bootstrapbootstrap-4shinypopover

Increase the right border size by half when the image is being hovered over

Seeking assistance with creating a hover image with a right border of color #000 that covers only 80% of the image's full length. I have attempted adjusting other "half border" codes for this purpose without success. Any suggestions on how to achieve ...

htmlcssborder

Why are the height and width values I specified not matching the values returned?

I am currently learning HTML and JavaScript, specifically diving into the width() and height() methods in JavaScript. Setting the dimensions of div1 to 100px for height and 300px for width, I encountered a discrepancy when running the code. Upon execution ...

javascripthtmlcss

Making the 'nav-link' Highlight When Selected using JQuery

I am looking to incorporate JQuery into my Bootstrap project so that when a page is selected on the website, it will be highlighted to show the user which page they are currently on. I would appreciate feedback from the community regarding this implement ...

jquerybootstrap-4

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

I am working with a collection of HTML tables that contain numbers presented in a specific style: <table border="1"> <tr> <th>Day</th> <th>Time</th> <th>A</th> <th>B</th> &l ...

javascriptjquerycsshtml-table

Transform CSS into React.js styling techniques

My current setup involves using Elementor as a REST Api, which is providing me with a collection of strings in React that are formatted like this: selector a { width: 189px; line-height: 29px; } Is there a tool or library available that can conver ...

javascriptcssreactjselementor

Update the text inside a paragraph using jQuery

When attempting to modify two values within a paragraph using jQuery, I encountered an issue where only one value was successfully updated, leaving the other empty. <div class="container"> <p class="lead custom_bg" id="comment"> updateme! ...

javascriptjqueryhtmlcssajax

What steps can I take to make sure that the content on my website is properly sized to fit within the browser window?

I'm currently working on a website project for my college assignment and I could really use some assistance with a significant issue that I've encountered. Whenever I open the html file of my website on my MacBook, which has a screen resolution ...

htmlcss

The solution for the fixed-top navbar issue in Bootstrap is not resolved with padding-top

My navigation bar is covering up my content. I've tried adding padding-top and ensuring that the custom.css file loads after the bootstrap css, but it's still not working. In my Django project, I'm certain that the custom.css file is being l ...

cssbootstrap-4

Center a vertically aligned element following a heading, with the content dynamically generated and enclosed in a fixed container

My mind is racing with this problem and I'm not sure if it's solvable, but before throwing in the towel, I thought I'd seek help from the Internet Gods. Here's a visual representation of what I'm aiming for: I want the text to al ...

htmlcssflexbox

Div element failing to scroll with excessive content

I'm currently working on a modal using Mui Modal and I've encountered an issue. Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if ...

cssreactjsmaterial-ui

Tips on keeping a div element in a fixed position until triggered by jQuery

I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essenti ...

javascriptjqueryhtmlcss

establish a distinct row color pattern for the initial column

I am currently working on a table that has sticky columns. I am trying to create alternating row colors in the first column only. Below is the code for the table: <div class="table-responsive"> <table class="table table-bordered table-stripe ...

cssbootstrap-4

Hidden bootstrap 4 custom checkbox issue

I tried to implement Bootstrap 4 custom control for a checkbox by following the documentation, but the checkbox isn't appearing. Can anyone spot what I might be doing incorrectly? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css ...

cssbootstrap-4

What is the process for altering the image on a jQuery mobile a href button?

Is it possible to use a custom image instead of a normal rectangular shape for a jquery mobile button? I'm looking for references on how to do this. The code below is an example of what I want. Here is an example of a normal button: <a data-role= ...

cssjquery-mobile

Adjusting the width of Bootstrap 4 form validation messages for improved layout

Having some issues with Bootstrap 4 form validation and jquery. When the validation message is displayed, it strangely affects the width of the entire form. Check out my HTML: <div class="container l-login-container"> <main class="l-mainConten ...

jqueryhtmlformsvalidationbootstrap-4