Question 45179 in Html Question posted in
Some basic documentation can be found here.

React + CSS: Scrollable section inside another scrollable section getting me issues to get the footer in Mobile – Html

Hope you can help me out here.

The thing is that I have a section, where I map components. This section has a vertical scroll. Outside this section, there’s another components, like a map , navbar, footer, etc.
When I’m in mobile, I can scroll through all the components mapped, but when I got to the end of the section, I can’t get to the footer or the pagination component.

To test this issue, you can enter this site and
try to scroll down all over and get to the pagination component in a mobile.

Sorry if I didn’t explained it well, It’s an annoying issue and I don’t know how to solve it.

Tags:

2

Answers


  1. 0

    I tested here using my PC and my cellphone and worked well. Anyway, if the problem persists, try to create a bigger space between components with margin top/down and test again and check using different models of cellphone to see how it will look.

    Responsively App can help you.

    Login or Signup to reply.
  2. 0

    This is caused by the inline style here:

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

    Try removing the inline style and adding a class that you can apply the required styling to in a media query to target desktop.

    So it could look something like (you can name the class to something more appropriate)

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

    css

        /* Reset for desktop */
    @media only screen and (min-width: 992px) {
      .scroll-fix {
         height: 860px; 
         overflow-y: scroll;
      }
     }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search