Having trouble with getting the footer to display correctly on mobile when dealing with a scrollable section within another scrollable section in React and CSS

Looking for some assistance with a coding issue I've encountered.

I have created a section on my website where I map components, which includes a vertical scroll. Outside of this section, there are other components such as a map, navbar, footer, etc. In mobile view, I am able to scroll through all the mapped components, but once I reach the end of the section, I am unable to access the footer or pagination component below.

If you want to test this problem, feel free to visit this site and try scrolling down to reach the pagination component on mobile devices.

I apologize if my explanation is unclear, but it's a frustrating issue that I'm struggling to resolve.

htmlcssreactjsscroll

Answer №1

The issue is stemming from the inline style being used here:

<div class="col-lg-7 col-sm-12" style="height: 860px; overflow-y: scroll;">

One solution is to remove the inline style and instead create a new class that can be targeted in a media query specifically for desktop screens.

You could implement this change by modifying the code like so (feel free to choose a more descriptive class name):

<div class="col-lg-7 col-sm-12 scroll-fix">

CSS

    /* Custom styling for desktop */
    @media only screen and (min-width: 992px) {
      .scroll-fix {
         height: 860px; 
         overflow-y: scroll;
      }
     }

Answer №2

After conducting tests with both my computer and cellphone, I found that everything was functioning properly. However, if the issue continues to persist, you may want to consider increasing the space between components by adjusting the margin top/down values. Additionally, testing on various models of cellphones can provide valuable insight into how the layout will appear.

If you need assistance with responsive design, Responsively App is a useful tool to utilize.

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

Creating a scrollable panel using CSS is easy with a solid border and a panel element

Using Vaadin to design my front-end, I encountered an issue where adding border-style:solid to the style.css file resulted in a scrollable v-panel. How can I retain the solid style while removing the scrolling feature? Please refer to the screenshot for cl ...

cssformborderstyle

Create a bootstrap table with td elements that have no wrap for their content

I am currently developing an application using springboot, thymeleaf, and bootstrap. Here is the snippet of the html code I'm working with: <!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <h ...

htmlspring-bootmavenbootstrap-4thymeleaf

Ensure that the child element completely fills the parent element while maintaining a padding around the edges

How can I create a child div that fills 100% of the parent's width and height, including padding? I've tried using box-sizing = border-box, but it isn't working. I also attempted adding the box-sizing property to all elements with *, but tha ...

htmlcss

Issue with JQM popup functionality in Firefox browser

I am currently utilizing JQM 1.3.1 and have a webpage featuring various popups located at the bottom of the page: <div data-role="page" data-title="Strategic Plans"> <div data-role="content" id="capbPlans" data-bind="cafeLiveScroll: { callbac ...

jqueryhtmljquery-mobileknockout.js

The state update does not seem to be affecting the DOM

I've implemented this component in my React app. It updates the state every second, but oddly enough the value <p>{this.state.time}</p> is not changing as expected. When I print the state value, it does change every second. import React f ...

javascriptreactjs

Having a CSS position fixed within a div container with the same width as its parent container

At the moment, I have three sections: left, center, and right. I want to add a fixed position div (notification) inside the center section so that it remains in place when scrolling. Additionally, I want this notification to resize according to changes in ...

htmlcss

Is a Text-Only View Possible with WebView?

Could someone help me figure out how to restrict a WebView to only load text in my WinRT XAML App? I am looking for a simpler solution than having to download the source and manually editing img tags. ...

htmlxamltextwebviewwindows-runtime

The JSON animation file cannot be imported directly from a public source

I'm encountering a problem... After importing an animation in JSON format from After Effects into a ReactJs project (using nextJs and lottie), I noticed that the animation does not run when imported into the public folder. However, if I place it in t ...

reactjsanimationnext.jslottieafter-effects

Issue with implementing styles on Navbar React component

I'm currently learning Next.js, specifically working with version 10.0.3. In my project, I am using react-bootstrap version 1.4.0 and classnames version 2.2.6. Within my project, I have a component called Navbar that I am trying to style in a certain ...

cssreactjsnext.jsstyled-jsx

toggle to enable dark mode feature in the material ui framework

I have been working on adding a dark mode toggle to my website. Everything seems to be set up correctly, and the toggle appears in the right place. I am using the useState hook to handle the toggle functionality. However, when I click on the toggle, the th ...

reactjsreact-hooksmaterial-ui

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state. https://i.sstatic.net/YTHky.png Previously, clicking on user details would take the user to the dashboard.tab ...

javascripthtmlcssangularjstwitter-bootstrap

Adjust the translateX value and element size based on either the parent element's size or the window's dimensions

Is this question specific enough to relate to others' problems? My issue involves two elements, a child and a parent, with the child element rotating around the parent using CSS animations. <div class="planet"> <div class="moon"></di ...

javascriptjqueryhtmlcss

What are alternative methods for creating a two-column form layout that do not involve the use of

When generating the html form, I am looping through the form variables as shown below: {% for field in form %} {{ LABEL }}{{ INPUT FIELD }} The labels and fields are going through a loop. A simple one-column layout can be generated using: {% for field ...

javascripthtmlcssformswebforms

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

htmlcss

Implement a Selection Feature in Angular

Currently, I am working on an application where users can add new rows with the same fields. One of the requirements is to allow users to add an option to a select element. While I have successfully implemented this in jQuery, I am facing challenges integr ...

javascriptjqueryangularjscss

What is the process for inheriting HTML templates?

I am currently utilizing KnockoutJS along with its default template engine. My goal is to establish a master template that can serve as a foundation for other templates to build upon, similar to a UserControl in .NET but within an HTML context. For instan ...

jqueryhtmlknockout.js

Nextjs introduces an innovative "OnThisDay" functionality, leveraging getServerSideProps and Date.now() to provide real-time information

I am currently working on adding an "OnThisDay" feature in my Nextjs project, inspired by Wikipedia's style of displaying events that happened on a specific date. To achieve this, I have implemented a function structured like the following code snippe ...

javascriptnode.jsreactjstypescriptnext.js

Adjust the badge color on the zabuto calendar

I am working on a website with a zabuto calendar that loads events through an ajax call. Each event on the calendar is currently represented by a yellow badge. I am wondering if there is a way to customize or change the color of these badges? Below is the ...

jquerycsscalendar

What causes a header to appear transparent when it has a background color set in HTML?

I'm attempting to create a webpage that resembles Gmail. I have a header with a background color, but when I scroll, the content in the body becomes visible. Here is the view without scrolling: https://i.stack.imgur.com/UQ2sO.png However, while scr ...

htmlcss